上海网站推广优化,七牛云做网站,淘宝网站建设的优点,最便宜的云服务器一年多少钱一、情景说明
上一节#xff0c;我们学会在vc的computed模块中#xff0c;使用mapState和mapGetters来简化代码 这一节#xff0c;我们学习在vc的methods模块中#xff0c;使用mapMutations和mapActions来简化代码
在vc的methods中#xff0c;我们会使用到store的dispat…一、情景说明
上一节我们学会在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 vuexindex.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 clickincrement(n)/buttonbutton clickdecrement(n)-/buttonbutton clickincrementOdd(n)当前求和为奇数再加/buttonbutton clickincrementWait(n)等一等再加/button
