天天看點

為什麼Vuex中必須要通過commit送出mutation?

更改 Vuex 的 store 中的狀态的唯一方法是送出 mutation。Vuex 中的 mutations 非常類似于事件:每個 mutation 都有一個字元串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀态更改的地方,并且它會接受 state 作為第一個參數:
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀态
      state.count++
    }
  }
})
           

你不能直接調用一個 mutation handler。這個選項更像是事件注冊:“當觸發一個類型為 increment 的 mutation 時,調用此函數。”要喚醒一個 mutation handler,你需要以相應的 type 調用 store.commit 方法:

store.commit('increment')
           

再次強調,我們通過送出 mutation 的方式,而非直接改變 store.state.count,

是因為我們想要更明确地追蹤到狀态的變化

。這個簡單的約定能夠讓你的意圖更加明顯,這樣你在閱讀代碼的時候能更容易地解讀應用内部的狀态改變。此外,這樣也讓我們有機會去實作一些能記錄每次狀态改變,儲存狀态快照的調試工具。有了它,我們甚至可以實作如時間穿梭般的調試體驗。

由于 store 中的狀态是響應式的,在元件中調用 store 中的狀态簡單到僅需要在計算屬性中傳回即可。觸發變化也僅僅是在元件的 methods 中送出 mutations。