跟着文档学Vuex（四）：状态变更Mutations

不觉中我们已经来到了第四章，教程也走到了一半，上两节我们分别介绍了
State（状态）,Getters（状态过滤）的用法，这里肯定要有朋友问了，那如果我想要修改状态里的数据怎么办，不要急，看完本章你一定能找到答案

如何调用

在Vuex中，更改state数据的唯一方法是提交mutation。Vuex中的mutation非常类似于事件；每个mutation都有一个字符串的事件类型和一个回调函数。废话不多说，看代码

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

如果有看上两节内容的同学一定会说，那调用是不是这么写

//this.store.mutations.increment()

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

this.store.commit('increment')

提交载荷(Payload)

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

mutations: {
  increment (state, n) {
    state.count += n
  }
}
this.store.commit('increment', 10)

大多数情况下，载荷最好用对象形式传入，这样会更易读

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
this.store.commit('increment', {
  amount: 10
})

还可以使用对象风格的提交方式

this.store.commit({
  type: 'increment',
  amount: 10
})

减轻负担的老朋友 mapMutations

使用方法还是老规矩

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 为 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
    })
  }
}

怎么样，是不是熟悉的配方，熟悉的味道，下一节，我们要学习Actions的用法，同学们记得提前预习哦~

引用

https://vuex.vuejs.org Vuex官方文档