vue---操作狀態

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。

打完收工！