欢迎使用CSDN-markdown编辑器

来源：互联网发布：unity3d ios 红色问号编辑：程序博客网时间：2024/06/07 03:25

vuex初探 - 大灰狼的小绵羊哥哥的博客 - CSDN博客

关闭

目录视图
摘要视图
订阅

var username = "sinat_17775997"; var _blogger = username; var blog_address = "http://blog.csdn.net/sinat_17775997"; var static_host = "http://static.blog.csdn.net"; var currentUserName = "ChenSiMao";

    <div id="body">        <div id="main">            <div class="main">                    <div class="ad_class">

赠书 | AI专栏（AI圣经！《深度学习》中文版） 机器学习&数据挖掘系统实训 【获奖公布】征文 | 你会为 AI 转型么？

window.quickReplyflag = true; var isBole = false; var fasrc="http://my.csdn.net/my/favorite/miniadd?t=vuex%e5%88%9d%e6%8e%a2&u=http://blog.csdn.net/sinat_17775997/article/details/75227873"

vuex初探

    <div class="article_manage clearfix">    <div class="article_r">        <span class="link_postdate">2017-07-18 09:04</span>        <span class="link_view" title="阅读次数">103人阅读</span>        <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)</span>        <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('vuex%e5%88%9d%e6%8e%a2','75227873');return false;" title="收藏">收藏</a></span>         <span class="link_report"> <a href="#report" onclick="javascript:report(75227873,2);return false;" title="举报">举报</a></span>    </div></div>    <style type="text/css">                .embody{            padding:10px 10px 10px;            margin:0 -20px;            border-bottom:solid 1px #ededed;                        }        .embody_b{            margin:0 ;            padding:10px 0;        }        .embody .embody_t,.embody .embody_c{            display: inline-block;            margin-right:10px;        }        .embody_t{            font-size: 12px;            color:#999;        }        .embody_c{            font-size: 12px;        }        .embody_c img,.embody_c em{            display: inline-block;            vertical-align: middle;                       }         .embody_c img{                           width:30px;            height:30px;        }        .embody_c em{            margin: 0 20px 0 10px;            color:#333;            font-style: normal;        }</style><script  type="text/javascript">    $(function () {        try        {            var lib = eval("("+$("#lib").attr("value")+")");            var html = "";            if (lib.err == 0) {                $.each(lib.data, function (i) {                    var obj = lib.data[i];                    //html += '<img src="' + obj.logo + '"/>' + obj.name + "&nbsp;&nbsp;";                    html += ' <a href="' + obj.url + '" target="_blank">';                    html += ' <img src="' + obj.logo + '">';                    html += ' <em><b>' + obj.name + '</b></em>';                    html += ' </a>';                });                if (html != "") {                    setTimeout(function () {                        $("#lib").html(html);                                              $("#embody").show();                    }, 100);                }            }              } catch (err)        { }    });</script>  <div class="category clearfix">    <div class="category_l">       <img src="http://static.blog.csdn.net/images/category_icon.jpg">        <span>分类：</span>    </div>    <div class="category_r">                <label  onclick="GetCategoryArticles('6439642','sinat_17775997','top','75227873');">                    <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">Vuex<em>（21）</em></span>                  <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">                  <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">                    <div class="subItem">                        <div class="subItem_t"><a  href="http://blog.csdn.net/sinat_17775997/article/category/6439642"  target="_blank">作者同类文章</a><i class="J_close">X</i></div>                        <ul class="subItem_l" id="top_6439642">                                                    </ul>                    </div>                </label>                        </div></div>

WW（是什么、为什么）　

转自http://www.cnblogs.com/zhuzhenwei918/p/6833078.html

　什么是vuex？如果你学过react，那么你就更容易理解vuex，因为vuex相当于react中的redux，它是用于管理数据的工具。我们看一看官网的介绍：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

　　为什么要使用vuex？因为如果不用vuex，我们也可以控制组件之间的通信，但是会非常的难以管理，而通过vuex我们可以更为方便的控制数据在组件之间的通信。尤其是对于父组件向子组件传递数据，我们可以通过props，而子组件向父组件传递数据，我们可以使用events up。但是如果希望组件之间的通信（这往往也是最为需求的），我们就很难处理，这是vuex就派上用场了。

　　如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

VUEX核心

　　vuex的核心就是一个store（仓库），这个仓库中包含了所有的状态。关键词：状态 — vue中使用了状态这个词，实际上就是数据，只是这个数据是响应式的，当store中的状态发生变化时，依赖这个store的组件也会得到高效的更新，值得注意的是：我们不能随意的改变这个状态，而必须通过特有的方式 — 显式地提交(commit) mutations。这种方式的好处在于我们可以方便的管理状态的改变。

VUEX简单实例

在使用下面的实例过程中我们需要先安装vuex，通过npm的方式或者通过使用cdn的方式都是可以的。下面是一个最简单的的例子：

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)const store = new Vuex.Store({  state: {    count: 0  },  mutations: {    increment (state) {      state.count++    }  }})

可以看到，我们再使用vue时，无论是vue，还是vue-router，或者是vuex，都需要创建一个实例来使用。

现在我们可以使用store.state.count的方式来访问状态对象、通过store.commit(‘increment’)的方式触发状态变更 — 这也是修改store中的状态的唯一方式，所以我们不能通过给store.state.count赋值的方式来修改仓库中的state，这样限制的好处在于我们可以更清晰、容易地来控制数据。

vuex计数应用

vuex核心概念之一 state

　首先要理解的是vuex使用的是单一状态树，即vuex的状态管理处于一棵树，也许你的应用非常复杂，分为了很多不同的模块，但是每个应用也仅仅包含一个store实例，我们可以将store分散到各个子模块中去。

　那么我们如果读取到state呢？ vuex的方式是将store注册到vue实例中（前提是使用vue.use(vuex)），然后才能获取到状态，

const app = new Vue({  el: '#app',  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件  store,  components: { Counter },  template: `    <div class="app">      <counter></counter>    </div>  `})

　即创建了一个实例之后，我们将store注册进来，然后该 store 实例会注入到根组件下的所有子组件中，且子组件可以通过 this.$store访问到状态对象。

　访问一个状态我们需要使用计算属性，但是如果我们需要访问到很多状态，那么每一个状态都通过计算属性得到就会非常麻烦，于是vuex提供了mapState。

vuex核心概念之二Getters

　有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

computed: {  doneTodosCount () {    return this.$store.state.todos.filter(todo => todo.done).length  }}

　如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它 —— 无论哪种方式都不是很理想。

　Vuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。Getters 接受 state 作为其第一个参数。

const store = new Vuex.Store({  state: {    todos: [      { id: 1, text: '...', done: true },      { id: 2, text: '...', done: false }    ]  },  getters: {    doneTodos: state => {      return state.todos.filter(todo => todo.done)    }  }})

vuex核心概念之三mutations

　更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

const store = new Vuex.Store({  state: {    count: 1  },  mutations: {    increment (state) {      // 变更状态      state.count++    }  }})

　然后通过store.commit(’increment’)就可以来更改state了。

　提交载荷

　我们使用mutations改变状态，同时在commit时我们可以传递参数，如：

mutations: {  increment (state, n) {    state.count += n  }}store.commit('increment', 10)

　但是这里只传入了一个参数，但是对于复杂的页面，我们往往需要传入多个参数，那么传入一个对象是一个不错的选择，这就是payload。如下：

// ...mutations: {  increment (state, payload) {    state.count += payload.amount  }}store.commit('increment', {  amount: 10})

　其中传入的这个对象就是payload。

　当然，在使用提交时，我们还可以换一种风格，即只传一个对象作为参数，把mutations中的方法作为对象的type的值，如下所示：

store.commit({  type: 'increment',  amount: 10})

　并且handler是不变的。

　值得注意的是： mutation必须是同步函数。

vuex核心概念之四actions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

下面就是一个简单的actions：

const store = new Vuex.Store({  state: {    count: 0  },  mutations: {    increment (state) {      state.count++    }  },  actions: {    increment (context) {      context.commit('increment')    }  }})

可以看到action的提交时mutation而不是直接变更状态，所以mutation是唯一可以变更状态的方法就是成立的了。

vuex核心概念之五modules

　　最开始我们说到了state是单一状态树，即整个应用使用一个状态树。但是又提到了如果应用比较大时，我们的代码一般都是分模块的，那么这个状态树应当是分散的。

　　Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割：

const moduleA = {  state: { ... },  mutations: { ... },  actions: { ... },  getters: { ... }}const moduleB = {  state: { ... },  mutations: { ... },  actions: { ... }}const store = new Vuex.Store({  modules: {    a: moduleA,    b: moduleB  }})store.state.a // -> moduleA 的状态store.state.b // -> moduleB 的状态

项目结构

　vuex并不会限制你的代码结构，但是它要求你必须遵守一定的规则：

应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。

　只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation、和 getters 分割到单独的文件。

　　即因为应用比较复杂，所以store的创建导出、action、mutation等代码都比较复杂时，为了使逻辑更为清晰，我们不是将vuex写在一个js文件中，而是分开写，并且放在store文件夹下。

阅读全文

0 0