在Vuex使用dispatch和commit来调用mutations的区别详解
时间:2021-07-02 08:56:39|栏目:vue|点击: 次
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方法名',值)
上一篇:详解Vue中使用Axios拦截器
栏 目:vue
下一篇:vue-cli ―― 如何局部修改Element样式
本文标题:在Vuex使用dispatch和commit来调用mutations的区别详解
本文地址:http://www.codeinn.net/misctech/151296.html