挑战全网最幽默的Vuex系列教程：第三讲 Vuex旗下的Mutation

写在前面

上一讲「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 } } 关于提交的方式，有两种：

// 一、把载荷和type分开提交
store.commit('increment', {
  amount: 10
})

// 二、整个对象都做为载荷传给 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" 致使的状态变动都应该在此刻完成。
复制代码

写在最后

这一讲相对来讲应该仍是比较好理解的。对于官方我以为比较难理解的，我都尽可能用通俗易懂的示例来进行分析，来加深你们的理解，可是不知道效果如何。若是对你们有帮助，欢迎点赞和转载，注明出处便可。

转载声明：

做者：大宏说 连接：www.jianshu.com/p/64727454f…

后记

以上就是胡哥今天给你们分享的内容，喜欢的小伙伴记得点赞、收藏呀，关注胡哥有话说，学习前端不迷路，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！现任京东前端攻城狮一枚。 胡哥有话说，专一于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！