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个人笔记 公众号

转载于:https://juejin.im/post/5c54fdd2518825622f12cdee