Vuex中的Mutations

在 Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合，这是Vuex 设计很重要的一点，就是把处理数据逻辑方法全部放在 mutations 里面，使得数据和视图分离。

Mutations使用

Vuex 中的 mutations 非常类似于事件，每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler)，也可以理解为{type:handler()}，这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法。

示例：

这个回调函数会接受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')

提交载荷（Payload）

载荷简单的理解就是往 handler(state) 中传参 handler(state, pryload) 。

示例：

大多数情况下，载荷是一个对象：

mutations: {
   
  // 提交荷载
  increment (state, payload) {
   
    state.count += payload.amount
  }