写在前面
上一讲「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" 导致的状态变更都应该在此刻完成.
最在最后
来源: http://www.tuicool.com/articles/VzAJziB