vue提交mutation_Vuex之mutation
我们已经可以在组建中使用store里面的数据了，那么我们要怎么修改这个数据呢？vuex提供了mutation，官网上说：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
简单来说mutations里面是一个一个的方法，参数第一个就是state：
export default {
scoreChange(state){
state.score++;
}
}
复制代码
调用的话官网说：
你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法，简单来说就是：
this.$store.commit('scoreChange');
官网所说的type就是mutation里面定义的方法名字。
你可以向 store.commit 传入额外的参数，即 mutation 的 载荷(payload):
export default {
scoreChange(state, num){
state.score += num;
}
}
复制代码
调用：
this.$store.commit('scoreChange', 10);
官网有几个建议：
参数最好是一个对象。
Mutation 需遵守 Vue 的响应规则，具体可以看官网。
使用常量替代 Mutation 事件类型，本人不是很喜欢，有兴趣的可以自己去看看。
Mutation 必须是同步函数，但其实试过的都知道就算是异步函数也是可以实现状态的修改，那为什么要都是同步的呢？主要是为了调试，使用devtools的时候采用异步不好追踪数据。一定要注意，mutation不能是异步最主要的就是为了调试，而不是不能修改状态。
辅助函数mapMutations：
引入：import { mapState, mapMutations } from 'vuex'
两种方式注入：
...mapMutations([ 'scoreChange',]),
...mapMutations({ add: 'scoreChange'})
调用：
this.add(10);
this.scoreChange(10);
欢迎关注Coding个人笔记 公众号