Vue2：Vuex中使用mapMutations和mapActions-Toy模板网

这篇具有很好参考价值的文章主要介绍了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代码方式传入参数文章来源地址https://www.toymoban.com/news/detail-828342.html

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