写在前面
上一讲「Vuex 旗下的 State 和 Getter」，告诉了我们怎么去使用仓库 store 中的状态数据。当然，光会用肯定还不够，大部分的应用场景还得对这些状态进行操控，那么具体如何操控呢，这就是这一讲要说的重点。
只有 mutation 能动 State
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
// 事件类型 type 为 increment
increment (state) {
// 变更状态
state.count++
}
}
})
注意，我们不能直接 store.mutations.increment()来调用，Vuex 规定必须使用 store.commit 来触发对应 type 的方法：
store.commit('increment')
传参
我们还可以向 store.commit 传入额外的参数：
mutations: {
increment (state, n) {
state.count += n
}
}
// 调用
store.commit('increment', 10)
mutation 中的这个额外的参数，官方给它还取了一个高大上的名字：载荷（payload）。说实话，第一次在文档中看到这个标题「提交载荷」，真的就不想往下看了。
我们往往不是败给了这些生涩的概念，而是败给了自己内心的恐惧。
大多数情况下，载荷是一个对象，能够让我们更加易读：
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
关于提交的方式，有两种：
// 1、把载荷和type分开提交
store.commit('increment', {
amount: 10
})
// 2、整个对象都作为载荷传给 mutation 函数
store.commit({
type: 'increment',
amount: 10
})
当然，使用哪种方式没有绝对的界限，纯看自己的喜好，就我个人而言，还是比较倾向于使用第二种姿势，放在一起更实在。
修改规则
简单修改基础类型的状态数据倒是简单，没什么限制，但是如果修改的是对象，那就要注意了。比如这个例子：
const store = new Vuex.Store({
state: {
student: {
name: '小明',
sex: '女'
}
}
})
这个时候，我们如果想要给 student 添加一个年龄age: 18属性，怎么办呢？
是的，直接在 sex 下面把这个字段加上去不就行了，能这样当然最好了。但是如果我们要动态的修改呢？那就得遵循 Vue 的规则了。如下：
mutations: {
addAge (state) {
Vue.set(state.student, 'age', 18)
// 或者：
// state.student = { ...state.student, age: 18 }
}
}
以上就是给对象添加属性的两种方式，当然，对于已添加的对象，如果想修改具体值的话，直接更改就是，比如state.student.age=20 即可。
至于为什么要这样，之前我们了解过，因为 store 中的状态是响应式的，当我们更改状态数据的时候，监视状态的 Vue 组件也会自动更新，所以 Vuex 中的 mutation 也需要与使用 Vue 一样遵守这些规则。
使用常量
就是使用常量来替代 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 是怎么调用的：store.commit('increment')，可以发现，这里 commit 提交的方法increment，是以字符串的形式代入的。如果项目小，一个人开发的话倒还好，但是项目大了，编写代码的人多了，那就麻烦了，因为需要 commit 的方法一多，就会显得特别混乱，而且以字符串形式代入的话，一旦出了错，很难排查。
所以，对于多人合作的大项目，最好还是用常量的形式来处理 mutation，对于小项目倒是无所谓，想偷懒的随意就好。
必须是同步函数
一定要记住，Mutation 必须是同步函数。为什么呢？
前面说了，我们之所以要通过提交 mutation 的方式来改变状态数据，是因为我们想要更明确地追踪到状态的变化。如果像下面这样异步的话：
mutations: {
someMutation (state) {
api.callAsyncMethod(() => {
state.count++
})
}
}
我们就不知道什么时候状态会发生改变，所以也就无法追踪了，这与 Mutation 的设计初心相悖，所以强制规定它必须是同步函数。
store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。
最在最后
这一讲相对来说应该还是比较好理解的。对于官方我觉得比较难理解的，我都尽量用通俗易懂的示例来进行分析，来加深大家的理解，但是不知道效果如何。如果对大家有帮助，欢迎点赞和转载，注明出处即可。
转载声明：
作者：大宏说
链接：https://www.jianshu.com/p/64727454f151
后记
以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得点赞、收藏呦，关注胡哥有话说，学习前端不迷路，欢迎多多留言交流...
胡哥有话说，一个有技术，有情怀的胡哥！现任京东前端攻城狮一枚。
胡哥有话说，专注于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！
网友评论