Mutation

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

  1. import createStore from 'chameleon-store'
  3. const store = createStore({
  4.   state: {
  5.     count: 1
  6.   },
  7.   mutations: {
  8.     increment (state) {
  9.       // 变更状态
  10.       state.count++
  11.     }
  12.   }
  13. })
  15. export default store

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

  1. store.commit('increment')

提交载荷（Payload）

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

  1. // ...
  2. mutations: {
  3.   increment (state, n) {
  4.     state.count += n
  5.   }
  6. }
  1. store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

  1. // ...
  2. mutations: {
  3.   increment (state, payload) {
  4.     state.count += payload.amount
  5.   }
  6. }
  1. store.commit('increment', {
  2.   amount: 10
  3. })

Mutation 需遵守 Chameleon 的响应规则

既然 chameleon内置store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Chameleon 组件也会自动更新。这也意味着 chameleon内置store 中的 mutation 也需要与使用 Chameleon 一样遵守一些注意事项：

  • 最好提前在你的 store 中初始化好所有所需属性。

  • 当需要在对象上添加新属性时，你应该

  1. state.obj = { ...state.obj, newProp: 123 }

使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：

  1. // mutation-types.js
  2. export const SOME_MUTATION = 'SOME_MUTATION'
  1. // store.js
  2. import createStore from 'chameleon-store'
  3. import { SOME_MUTATION } from './mutation-types'
  5. const store = createStore({
  6.   state: { ... },
  7.   mutations: {
  8.     // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
  9.     [SOME_MUTATION] (state) {
  10.       // mutate state
  11.     }
  12.   }
  13. })
  14. export default store

用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做。

Mutation 必须是同步函数

一条重要的原则就是要记住 mutation 必须是同步函数。为什么？请参考下面的例子：

  1. mutations: {
  2.   someMutation (state) {
  3.     api.callAsyncMethod(() => {
  4.       state.count++
  5.     })
  6.   }
  7. }

现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

在组件中提交Mutation

你可以在组件中使用 store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

  1. import store from '../store'
  3. createComponent({
  4.   // ...
  5.   methods: {
  6.     ...store.mapMutations([
  7.       'increment', // 将 `this.increment()` 映射为 `store.commit('increment')`
  9.       // `mapMutations` 也支持载荷：
  10.       'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `store.commit('incrementBy', amount)`
  11.     ]),
  12.     ...store.mapMutations({
  13.       add: 'increment' // 将 `this.add()` 映射为 `store.commit('increment')`
  14.     })
  15.   }
  16. })

下一步：Action

在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 chameleon内置store 中，mutation 都是同步事务：

  1. store.commit('increment')
  2. // 任何由 "increment" 导致的状态变更都应该在此刻完成。

为了处理异步操作，让我们来看一看 Action。