不觉中我们已经来到了第四章，教程也走到了一半，上两节我们分别介绍了
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官方文档
