Mutation

1. 前言

本文我们将介绍如何使用mutation。包括如何定义 mutation、如何触发 mutation、mapMutations 辅助函数的使用方式。mutation是更改 Vuex 中 store 数据状态的唯一方法。在vuex的使用过程中，我们需要编写大量的mutation来操作 store 中的数据。所以，学好如何使用 mutation 非常重要。mutation并不是一个难点，它的使用非常简单，接下来我们就一步步学习它的使用。

2. 基础用法

2.1. 定义 mutation

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

2.2. 触发 mutation

我们不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：

store.commit('increment')

2.3. 提交载荷（Payload）

你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：

mutations: {
  incrementByCount (state, n) {
    state.count = state.count + n
  }
}

store.commit('incrementByCount', 10)

在大多数情况下，载荷应该是一个对象，我们通常接收的参数命名为 payload，这样可以包含多个字段并且记录的 mutation 会更易读：

// 定义 mutation
mutations: {
  incrementByCount (state, payload) {
    state.count = state.count  + payload.count
  }
}
// 触发 mutation
store.commit('incrementByCount', {
  count: 10
})

2.3. 对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
  type: 'incrementByCount',
  count: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

mutations: {
  incrementByCount (state, payload) {
    state.count = state.count  + payload.count
  }
}

完整示例：