©
本文檔使用php中文網手册發布
在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。 Vuex 的 mutation 和事件系统非常相似：每个 mutation 都有一个字符串类型(type)和 一个回调函数(handler)。回调函数是我们执行实际修改状态的地方，它将接收 状态(state) 作为第一个参数。
const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 改变 state state.count++ } } })
你不能直接调用 mutation 的回调函数。选项 mutations 在这里更像是注册事件：“当触发类型为increment的 mutation 时，执行其回调函数。”所以你需要调用该类型的store.commit才能执行 mutation 的回调函数。
store.commit('increment')
向store.commit传递一个额外的参数，这个参数被称为payload：
// ... mutations: { increment (state, n) { state.count += n } }
多数情况下，payload 应该是一个对象，以便它可以包含多个字段，这样 mutation 记录中有了 payload 字段名，可描述性会变得更好。
// ... mutations: { increment (state, payload) { state.count += payload.amount } }
store.commit('increment', { amount: 10 })
提交 mutation 的另一种替代方式，是直接使用具有type属性的对象：
store.commit({ type: 'increment', amount: 10 })
当使用对象风格的 commit，整个对象都会被作为 payload 参数传入到对应类型的 mutation 的回调函数中，不过回调函数还保持不变：
mutations: { increment (state, payload) { state.count += payload.amount } }
注意：一旦我们实现了 devtools 中过滤 mutation，此特性可能会被弃用。
默认情况下，每个提交过的 mutation 都会被发送到插件（如 devtools）。然而在某些情况下，你可能不希望插件去记录每个状态更改。像是在短时间多次提交到 store 或轮询，并不总是需要跟踪。在这种情况下你可以在store.commit中传入第三个参数，来指定插件中的 mutation 是否“静默”。
store.commit('increment', { amount: 1 }, { silent: true }) // 使用对象风格的 dispatch store.commit({ type: 'increment', amount: 1 }, { silent: true })
由于 Vue 中 Vuex store 的状态是响应式的，当我们改变状态，Vue 组件观察到状态改变将自动更新。这也意味着 Vuex mutation 同样遵循纯 Vue 响应式规则。
推荐预先初始化 store 中你所需的初始状态。
向对象添加新的属性时，你应该这样做：
使用Vue.set(obj, 'newProp', 123)
用新的对象替换该对象。例如，使用 stage-2 对象扩展语法 我们可以这样写：
state.obj = { ...state.obj, newProp: 123在各种 Flux 实现中，使用常量作为 mutation 类型是一种常见的模式。这允许代码利用工具如 linters，将所有常量放在一个单独文件中，尽可能使协作者对整个应用的 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) { // 改变状态 } } })
是否使用常量在很大程度上是一个偏好 - 在多人合作开发的大型项目中它很有用，但如果你不喜欢使用，它也是完全可选的。
一个重要的原则就是牢记mutation 必须是同步函数。为什么？考虑下面的例子：
mutations: { someMutation (state) { api.callAsyncMethod(() => { state.count++ }) } }
现在想象我们正在调试应用程序，并查看 devtool 的 mutation 记录。每个 mutation 记录，devtool 将需要捕获每个状态“之前”和“之后”的快照。然而，上面的示例中 mutation 内部的异步回调使得这是不可能的：当 mutation 被提交后，回调函数还未被调用，也没有办法让 devtool 知道回调函数在何时被调用 - 即在回调函数中执行任意状态变更，实际上都无法跟踪。
可以在组件中使用this.$store.commit('xxx')提交 mutation，或者使用mapMutations工具遍历组件方法到store.commit的回调上(需要把store注入根组件)
import { mapMutations } from 'vuex' export default { // ... methods: { ...mapMutations([ 'increment' // 映射 this.increment() 到 this.$store.commit('increment') ]), ...mapMutations({ add: 'increment' // 映射 this.add() 到 this.$store.commit('increment') }) } }
在 mutation 中混合异步调用会导致你的程序很难调试。例如当你调用两个都含有异步回调的方法去改变状态，你如何知道他们何时被调用和哪个回调被首先调用？这正是我们分离 Mutation 和 Action 这两个概念的原因。在 Vuex，Mutation 必须是同步事务：
store.commit('increment') // 类型为 "increment" 的 mutation 提交后，可能引起的任意状态变化，都应该在此时同步完成
为了处理异步操作，接下来我们介绍 Actions。