Vuex中的Mutations的具体使用方法
在Vuex中store数据改变的唯一方法就是提交mutations。mutations里面装着一些改变数据方法的集合，这是Vuex设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。
Mutations使用
Vuex中的mutations非常类似于事件，每个mutations都有一个字符串的事件类型(type)和一个回调函数(handler)，也可以理解为{type:handler()}，这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法。
示例：
这个回调函数会接受state作为第一个参数：
conststore=newVuex.Store({
state:{
count:1
},
mutations:{
//事件类型type为increment
increment(state){
//变更状态
state.count++
}
}
})
我们不能直接使用store.mutations.increment()来调用，Vuex规定必须使用store.commit来触发对应type的方法：
store.commit('increment')
提交载荷（Payload）
载荷简单的理解就是往handler(state)中传参handler(state,pryload)。
示例：
大多数情况下，载荷是一个对象：
mutations:{
//提交荷载
increment(state,payload){
state.count+=payload.amount
}
}
提交荷载有两种方式：
//把载荷和type分开提交
store.commit('increment',{
amount:10
})
//整个对象都作为载荷传给mutation函数
store.commit({
type:'increment',
amount:10
})
我们可以根据自己的喜好来选择使用哪种提交方式。
commit
我们可以在组件中使用this.$store.commit('xxx')提交mutations。
示例：
或者可以使用mapMutations辅助函数将组件中的methods映射为store.commit调用（需要在根节点注入store）。
示例：
在使用mapMutations辅助函数之前同样需要先引入：
Mutations需遵守Vue的响应规则
Vuex的store中的状态是响应式的，所以当我们变更状态时，监视状态的Vue组件也会自动更新。
这也意味着Vuex中的mutations也需要与使用Vue一样遵守一些注意事项，如下所示：
- 最好提前在store中初始化好所有所需属性。
- 当需要在对象上添加新属性时，应该使用Vue.set(obj,'newProp',123)，或者以新对象替换老对象。例如利用对象展开运算符可以写成：state.obj={...state.obj,newProp:123}。
使用常量替代Mutations事件类型
使用常量替代mutations事件类型在各种Flux实现中是很常见的模式。这样可以使linter之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个app包含的mutations一目了然：
//mutation-types.js exportconstSOME_MUTATION='SOME_MUTATION'
store.js文件内容如下所示：
//store.js
importVuexfrom'vuex'
import{SOME_MUTATION}from'./mutation-types'
conststore=newVuex.Store({
state:{...},
mutations:{
//使用ES2015风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION](state){
//mutatestate
}
}
})
我们知道mutation是通过store.commit('increment')的方式调用的，其中increment方法是以字符串的形式代入。如果项目小，一个人开发的话倒还好，但是项目大了，编写代码的人多了，那就麻烦了，因为需要commit的方法一多，就会显得特别混乱，而且以字符串形式代入的话，一旦出了错，很难排查。
所以，在需要多人协作的大型项目中，最好还是用常量的形式来处理mutation。
必须是同步函数
我们要记住的是，Mutation必须是同步函数。
因为我们之所以要通过提交mutation的方式来改变状态数据，是因为我们想要更明确地追踪到状态的变化。如果是类似下面这样异步的话：
mutations:{
someMutation(state){
api.callAsyncMethod(()=>{
state.count++
})
}
}
我们就不知道什么时候状态会发生改变，所以也就无法追踪了，这与Mutation的设计初心相悖，所以强制规定它必须是同步函数。
store.commit('increment')//任何由'increment'导致的状态变更都应该在此刻完成
到此这篇关于Vuex中的Mutations的具体使用方法的文章就介绍到这了,更多相关VuexMutations内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！