更改 Vuex 的 store 中的状态的唯⼀⽅法是提交 mutation。Vuex 中的 mutation ⾮常类

似于事件：每个 mutation 都有⼀个字符串的 事件类型 (type) 和 ⼀个 回调函数 (handler)。 这个回调函数就是我们实际进⾏状态更改的地⽅，并且它会接受 state 作为第⼀个参数：- - 官⽅⽂档 简单来说，如果要修改 Vuex 中的 state，必须提前定义 Mutation 函数，需要时再进⾏提交（触发）。

Mutation 接收 state 对象为第⼀个参数，⽤于操作 state 内的数据。

// store/index.js export default new Vuex.Store({ state: { user: 100 }, mutations: { setUser (state) { state.user++ } }, actions: { }, modules: { } })

在组件中通过 vm.$store.commit(‘Mutation名称’) 提交 Mutation，执⾏操作。

// login/index.vue methods: { async onSubmit () { console.log(this.$store.state.user) this.$store.commit(‘setUser’) console.log(this.$store.state.user) … } }

Mutation 还接收 提交载荷（payload）作为第⼆个参数，指的是 commit() 传⼊的额外数据，常在需要 根据上下⽂数据修改 state 时使⽤。

// store/index.js mutations: { setUser (state, payload) { state.user = payload } }, // login/index.vue methods: { async onSubmit () { this.$store.commit(‘setUser’, ‘示例内容’) … } } Mutation 的设置⽅式使 Vuex 的状态修改有迹可循，易于维护。假象⼀下，如果 state 可以通过赋值修改，⼀旦出错将⽆从下⼿。 除此以外，Vue DevTools 还提供了⽤于 Vuex 更⾼级的调试⽅式 Time Travel。 Mutation - 图1 #### Mutation 必须为同步函数 由于 DevTools 提供了 Mutation ⽇志功能，为了确保功能正常，内部不能存在异步任务，否则 DelTools将⽆法得知 Mutation 的准确调⽤顺序。如果需要进⾏异步操作，则需要使⽤ Vuex 的 Action。