在Vuex使用dispatch和commit来调用mutations的区别详解

今天小编就为大家分享一篇在Vuex使用dispatch和commit来调用mutations的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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: '',   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的区别详解的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程