Vuex的理解以及它的辅助函数

理解：vue中的“单向数据流”，这里借用官网的图示：

Vue是单向数据流，v-model只是语法糖而已。单向数据流就是：数据总是【向下传递】从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父级传递过来的数据，当尝试在子组件内部修改父组件的数据，vue将报错。主要是为了组件解耦。（假如子组件可以修改父组件数据，那么一个子组件变化将会引发所有依赖这个数据的子组件发生变化，发生连锁反应，所以vue不推荐子组件修改父组件数据，直接修改props会抛出警告）。

但是如果子组件(props里面存的是父级组件流下来的数据)想要修改父组件的值怎么办呢？【主要是通过$emit定义事件】

定义一个局部变量，并用prop的值初始化它。

定义一个计算属性，处理prop的值并返回。

而vuex解决的问题是：多个组件依赖于一个共同的状态，变更一个组件的状态，其他组件响应式的更新。所以需要将这些组件的共享状态抽取出来，放在vue的最顶层，进行全局单例模式的管理。

vuex里面的state是变量状态管理，进行渲染组件，组件调用时候是通过dispatch actions，状态的改变需要进行commit mutations，主要是为了用vuejs devtools可以明确的追踪到状态的变化。

因为vuex是响应式的，所以在组件中调用store中的状态仅仅需要在计算属性computed【可以使用mapGetters进行状态的获取】中返回即可，触发变化在mothods中提交mutation【里面是改变state状态的一系列方法】就行。

Vuex除了Store对象，还对外提供了一系列的辅助函数，方便我们在代码中使用Vuex，提供了操作store的各种属性的一系列的语法糖，主要有mapState，mapGetters，mapActions，mapMutations，插件plugins选项。

参考链接：http://www.imooc.com/article/14741

1，state && mapState

state：vuex里的唯一数据源。当一个组件需要获取多个状态时候，将这些状态都声明为计算属性比较冗余，所以就用mapState。

2,getter && mapGetter

getter：store中派生状态，可以认为是store的计算属性。mapGetter将store中的getter映射到局部计算属性。

3，mutation && mapMutation

更改vuex中store中状态的唯一方法：提交mutation。每个mutation都有一个事件类型（type）和一个回调函数。这些事件类型一般是用常量代替。

为什么mutation里面必须是同步函数？

主要是在mutation中混合异步调用会导致程序很难调试。用devtools很难追踪状态的改变。所以就定义了一个actions专门进行异步的处理。

一般都是使用mapMutations辅助函数将组建中的methods映射为store.commit调用（需要在根节点注入store）。

4，action && mapActions

action类似于mutation，不同之处：

action提交的是mutation，而不是直接改变状态。

action可以包含任意异步操纵。

5，module

当应用变得比较复杂时候，store对象有可能变的相当臃肿。在此情况下，vuex允许将store分割成模块（module），每个模块有自己的state，mutation，action，getter甚至是嵌套子模块等。

巴特西

Vuex的理解以及它的辅助函数

最新文章

热门文章