快速理解Vuex

Vuex

一句话概括：state是数据源，mutation/action触发修改数据（getter封装数据），将state映射到view。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
每个应用将仅仅包含一个 store 实例
如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。
----摘自官网

vuex.png

1.State

总结：存储状态管理数据

2.Getter

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。
Vuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。
组件获取 state 用 vuex 的 getter。
Getters 会暴露为 store.getters 对象。
----摘自官网

总结：getter用于获取state数据(获取的数据可能经过封装，getters只是用来读取数据，不能用来改变数据。)

3.Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”
可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）。在大多数情况下，载荷应该是一个对象。
一条重要的原则就是要记住 mutation 必须是同步函数。
----摘自官网

总结：
1.Mutations是用来改变state数据状态的，这个改变操作是同步的。它是唯一一种可以改变store中数据的方法。
2.mutation注册了事件：修改store状态的函数，然后使用store.commit来触发调用此函数。

4.Action

Action 提交的是 mutation，而不是直接变更状态。
Action 通过 store.dispatch 方法触发：store.dispatch('increment')
increment (context) { context.commit('increment') }
increment ({ commit }) { commit('increment') }
----摘自官网

总结：
1.action 类似于 mutation，但不同在于(1)提交的是mutation，不是直接变更状态；(2)可以包含任意异步操作。
2.actions也是用来改变数据状态的，只不过它是异步的，其实它是利用一个已经存在的mutation来完成的。

原文：
快速理解Vuex