VUE更改VUEX状态:简单示例代码:
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++; }, decrement (state) { state.count--; } }, actions: { increment ({ commit }) { commit('increment'); }, decrement ({ commit }) { commit('decrement'); } } });
在该状态管理中,如果直接想要操作改变状态,可以使用 this.$store.commit 来调用 mutations,例如:
this.$store.commit('increment'); this.$store.commit('decrement');
此外也可以使用 this.$store.dispatch 来调用 actions 来 操作 mutations 改变状态,例如:
this.$store.dispatch('increment'); this.$store.dispatch('decrement');
那么 this.$store.commit 和 this.$store.dispatch 有什么区别:
commit方法:用于调用 Vuex store 中的 mutations。mutations 是同步事务,用于直接更改状态。当你在组件中需要直接更改状态时,可以使用 commit 方法来调用相应的 mutation。
dispatch 方法用于调用 Vuex store 中的 actions。actions 是用于处理异步操作或执行多个 mutations 的函数。与 mutations 不同,actions 不直接改变状态,而是通过调用 mutations 来改变状态。当你在组件中需要执行异步操作或需要执行多个 mutations 时,可以使用 dispatch 方法来调用相应的 action。
例如:通常会在 actions 里面进行异步操作后改变状态,此时就需要使用 dispatch 来驱动:
区别:
this.$store.commit 直接调用 mutations 来同步地改变状态。
this.$store.dispatch 调用 actions 来处理异步操作或执行多个 mutations。actions 最终还是会通过调用 mutations 来改变状态。
如果你需要执行的操作是同步的并且只需要改变状态,那么使用 commit。如果你需要执行异步操作或需要执行一系列操作,那么使用 dispatch。
打完收工!