河东特区,14号台风最新消息2017,甘蔗网造梦西游2无敌版
main.js中
import vuex from 'vuex' vue.use(vuex); const store = new vuex.store({ state: { nickname: "", cartcount: 0 }, mutations: { updateuserinfo(state,nickname) { state.nickname = nickname; }, updatecartcount(state,cartcount) { state.cartcount += cartcount; } }, actions: { updateuserinfo(context) { context.commit("updateuserinfo"); }, updatecartcount(context) { context.commit("updatecartcount"); } } }) new vue({ el: "#app", store, router, template: '<app/>', components: {app} })
组件中:
methods: { increment(){ this.$store.dispatch("updateuserinfo", 'nick'); //this.$store.commit("increment", 'nick'); }, decrement() { this.$store.dispatch("updatecartcount", 1); // this.$store.commit("decrement", 1); } }
区别:
dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('mutations方法名',值)
commit:同步操作,写法:this.$store.commit('mutations方法名',值)
以上这篇在vuex使用dispatch和commit来调用mutations的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论