Vue2：Vuex中使用mapMutations和mapActions

本文主要是介绍Vue2：Vuex中使用mapMutations和mapActions，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、情景说明

上一节，我们学会在vc的computed模块中，使用mapState和mapGetters来简化代码
这一节，我们学习在vc的methods模块中，使用mapMutations和mapActions来简化代码

在vc的methods中，我们会使用到store的dispatch和commit。
如果涉及到许多的方法都要用到store
那么，这个时候，就可以用mapMutations和mapActions来简化代码
其中，mapMutations对应commit
mapActions对应dispatch

二、案例

引入mapMutations和mapActions

	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

index.js中的配置

//准备actions     用于响应组件中的动作
const actions = {jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(()=>{context.commit('JIA',value)},500)}
};//准备mutations       用于操作数据state
const mutations = {JIA(state,value){console.log('mutations中的JIA被调用了')state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -= value}
};

vc组件中methods模块代码
两种写法，看情况使用

		methods: {//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)...mapMutations({increment:'JIA',decrement:'JIAN'}),//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)// ...mapMutations(['JIA','JIAN']),/* ************************************************* *///借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)// ...mapActions(['jiaOdd','jiaWait'])},

vc中html代码，使用methods时，通过html代码方式传入参数

		<button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button>