vue-vuex中使用commit提交mutation來修改state的方法詳解

在vuex中，關于修改state的方式，需要commit提交mutation。官方文檔中有這么一句話：

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。

為了搞清楚其原因，查閱了很多資料，發現其它人在做vuex的源碼解析的時候，并沒有將這點說的很明白。

所以只好自己去查看vuex的源碼，并且自己做demo進行驗證。

但是試驗后，發現直接修改state時，store中的state能夠改變，并且是響應式的，并沒有報錯。跟commit提交mutation的方式沒啥區別。

后來在github上遇到一位朋友，提醒試試嚴格模式下會發生什么。

一、兩種修改state方式的區別

在vuex官方文檔上看到了關于嚴格模式的描述：

開啟嚴格模式，僅需在創建 store 的時候傳入 strict: true；

在嚴格模式下，無論何時發生了狀態變更且不是由 mutation 函數引起的，將會拋出錯誤。這能保證所有的狀態變更都能被調試工具跟蹤到。

于是，將vuex設置成了嚴格模式。

直接修改state發現控制臺確實是報出了錯誤，但是state修改成功，并且依然是響應式的。

錯誤提示：

Do not mutate vuex store state outside mutation handlers.

通過commit 提交 mutation 的方式來修改 state 時，vue的調試工具能夠記錄每一次state的變化，這樣方便調試。但是如果是直接修改state，則沒有這個記錄。

commit修改state源碼分析

以上已經討論了在嚴格模式下，直接修改state會造成報錯。接下來通過分析源碼來一探究竟。

首先應該分析commit函數的代碼，因為mutation是通過commit函數來執行的。

在commit函數內部，由this._commit()函數來修改state。那么 _withCommit 又是什么呢，接著看 _withCommit 的代碼：

_withCommit 函數的參數 fn 就是修改state的函數。在執行 fn() 之前，會將 this._committing 設置為 true。等到fn()執行完畢后，又將 this._committing 的值進行恢復。那么為什么要將 this._withCommitting設置為true，其作用到底是什么。在vuex/src/store.js 的開頭發現了判斷嚴格模式的代碼：

這三行代碼很簡單：當 vuex設置為嚴格模式的時候，就會執行 enableStrictMode 函數。那么 enableStrictMode 又是什么鬼？

在 enableStrictMode 函數內部，調用了 $watch 函數來觀察 state的變化。當state變化時，就會調用 assert 函數，判斷 store._committing（即 上文的 this._committing） 的值，如果不為 true，就會報出異常：

Do not mutate vuex store state outside mutation handlers.

所以，如果通過外部直接修改state，則沒有執行 commit 函數，也就沒有執行 _withCommit 函數，進而 this._withCommitting 的值 不為 true，故當執行 enableStrictMode 時，則會執行 assert 函數，因為_withCommitting不為true，則報出異常了。

結語

綜上所述，在vuex中，最好設置成嚴格模式，并且按照文檔的要求，通過commit提交mutation的方式來修改state，而不要直接修改state。不然，控制臺會報錯，并且vue調試工具不會記錄state的變化，無法調試。

以上這篇vue-vuex中使用commit提交mutation來修改state的方法詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。