既然 Vuex 的 store 中的状态是响应式的，那么当变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：
1、最好提前在store中初始化好所有所需属性
2、当需要在对象上添加新属性时，应该使用 Vue.set(obj, 'newProp', 123), 或者以新对象替换老对象
例如，利用对象展开运算符可以这样写：
state.obj = { ...state.obj, newProp: 123 }
使用常量替代Mutation事件类型使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让代码合作者对整个 app 包含的 mutation 一目了然
// mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION' // store.js import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({ state: { ... }, mutations: { // 可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名 [SOME_MUTATION] (state) { // mutate state } } })
Mutation必须是同步函数一条重要的原则就是mutation必须是同步函数
mutations: { someMutation (state) { api.callAsyncMethod(() => { state.count++ }) } }
假如正在debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态改变都是不可追踪的
在组件中提交Mutation可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）
import { mapMutations } from 'vuex' export default { // ... methods: { ...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)` ]), ...mapMutations({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')` }) } }
action在 mutation 中混合异步调用会导致程序很难调试。例如，当能调用了两个包含异步回调的 mutation 来改变状态，怎么知道什么时候回调和哪个先回调呢？这就是为什么要区分这两个概念。在 Vuex 中，mutation 都是同步事务：
store.commit('increment') // 任何由 "increment" 导致的状态变更都应该在此刻完成。
Action类似于mutation，不同之处在于：
1、Action 提交的是 mutation，而不是直接变更状态
2、Action 可以包含任意异步操作
下面来注册一个简单的action
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
实践中，会经常用到 ES2015 的 参数解构 来简化代码（特别是需要调用 commit 很多次的时候）
actions: { increment ({ commit }) { commit('increment') } }
分发ActionAction 通过 store.dispatch 方法触发
store.dispatch('increment')
乍一眼看上去感觉多此一举，直接分发 mutation 岂不更方便？实际上并非如此，mutation必须同步执行这个限制，而Action 就不受约束，可以在 action 内部执行异步操作
actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }
Actions 支持同样的载荷方式和对象方式进行分发
// 以载荷形式分发 store.dispatch('incrementAsync', { amount: 10 }) // 以对象形式分发 store.dispatch({ type: 'incrementAsync', amount: 10 })
来看一个更加实际的购物车示例，涉及到调用异步 API 和分发多重 mutation：