1. vuex 文件
import Vuex from 'vuex'
Vue.use(vuex);
const store = new Vuex.store({
state: {
nickName: "",
cartCount: 0
},
mutations: {
updateUserInfoMutations(state,nickName) {
state.nickName = nickName;
},
updateCartCountMutations(state,cartCount) {
state.cartCount += cartCount;
}
},
actions: {
updateUserInfoActions(context) {
context.commit("updateUserInfoMutations");
},
updateCartCountActions(context) {
context.commit("updateCartCountMutations");
}
}
})
new Vue({
el: "#app",
store,
router,
template: '<App/>',
components: {App}
})
2. dispatch 和 commit 调用, mutations 里的函数事唯一可以改变 state 里数据的方法
methods: {
increment(){
this.$store.dispatch("updateUserInfoActions", 'nick'); //this.$store.commit("updateUserInfoMutations", 'nick');
},
decrement() {
this.$store.dispatch("updateUserInfoActions", 1); // this.$store.commit("updateUserInfoMutations", 1);
}
}
总结:
1. this.$store.dispatch 是调用actions 里的方法
2.this.$store.commit 是调用 mutations 里的方法