vue-vuex中使用commit提交mutation來修改state的方法詳解
在vuex中，關(guān)于修改state的方式，需要commit提交mutation。官方文檔中有這么一句話：
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。
為了搞清楚其原因，查閱了很多資料，發(fā)現(xiàn)其它人在做vuex的源碼解析的時候，并沒有將這點(diǎn)說的很明白。
所以只好自己去查看vuex的源碼，并且自己做demo進(jìn)行驗(yàn)證。
但是試驗(yàn)后，發(fā)現(xiàn)直接修改state時，store中的state能夠改變，并且是響應(yīng)式的，并沒有報(bào)錯。跟commit提交mutation的方式?jīng)]啥區(qū)別。
后來在github上遇到一位朋友，提醒試試嚴(yán)格模式下會發(fā)生什么。
一、兩種修改state方式的區(qū)別
在vuex官方文檔上看到了關(guān)于嚴(yán)格模式的描述：
開啟嚴(yán)格模式，僅需在創(chuàng)建 store 的時候傳入 strict: true；
在嚴(yán)格模式下，無論何時發(fā)生了狀態(tài)變更且不是由 mutation 函數(shù)引起的，將會拋出錯誤。這能保證所有的狀態(tài)變更都能被調(diào)試工具跟蹤到。
于是，將vuex設(shè)置成了嚴(yán)格模式。
直接修改state發(fā)現(xiàn)控制臺確實(shí)是報(bào)出了錯誤，但是state修改成功，并且依然是響應(yīng)式的。
錯誤提示：
Do not mutate vuex store state outside mutation handlers.
通過commit 提交 mutation 的方式來修改 state 時，vue的調(diào)試工具能夠記錄每一次state的變化，這樣方便調(diào)試。但是如果是直接修改state，則沒有這個記錄。
commit修改state源碼分析
以上已經(jīng)討論了在嚴(yán)格模式下，直接修改state會造成報(bào)錯。接下來通過分析源碼來一探究竟。
首先應(yīng)該分析commit函數(shù)的代碼，因?yàn)閙utation是通過commit函數(shù)來執(zhí)行的。
在commit函數(shù)內(nèi)部，由this._commit()函數(shù)來修改state。那么 _withCommit 又是什么呢，接著看 _withCommit 的代碼：
_withCommit 函數(shù)的參數(shù) fn 就是修改state的函數(shù)。在執(zhí)行 fn() 之前，會將 this._committing 設(shè)置為 true。等到fn()執(zhí)行完畢后，又將 this._committing 的值進(jìn)行恢復(fù)。那么為什么要將 this._withCommitting設(shè)置為true，其作用到底是什么。在vuex/src/store.js 的開頭發(fā)現(xiàn)了判斷嚴(yán)格模式的代碼：
這三行代碼很簡單：當(dāng) vuex設(shè)置為嚴(yán)格模式的時候，就會執(zhí)行 enableStrictMode 函數(shù)。那么 enableStrictMode 又是什么鬼？
在 enableStrictMode 函數(shù)內(nèi)部，調(diào)用了 $watch 函數(shù)來觀察 state的變化。當(dāng)state變化時，就會調(diào)用 assert 函數(shù)，判斷 store._committing（即 上文的 this._committing） 的值，如果不為 true，就會報(bào)出異常：
Do not mutate vuex store state outside mutation handlers.
所以，如果通過外部直接修改state，則沒有執(zhí)行 commit 函數(shù)，也就沒有執(zhí)行 _withCommit 函數(shù)，進(jìn)而 this._withCommitting 的值 不為 true，故當(dāng)執(zhí)行 enableStrictMode 時，則會執(zhí)行 assert 函數(shù)，因?yàn)開withCommitting不為true，則報(bào)出異常了。
結(jié)語
綜上所述，在vuex中，最好設(shè)置成嚴(yán)格模式，并且按照文檔的要求，通過commit提交mutation的方式來修改state，而不要直接修改state。不然，控制臺會報(bào)錯，并且vue調(diào)試工具不會記錄state的變化，無法調(diào)試。
以上這篇vue-vuex中使用commit提交mutation來修改state的方法詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Koa2+mongoose寫一個像素繪板的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue+Koa2+mongoose寫一個像素繪板的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
layer.js(mobile)是一個小巧方便的彈出層插件，在之前的apicloud項(xiàng)目中被大量使用，但最近對apicloud的IDE、非常不友好的文檔和極低的開發(fā)效率深感厭煩，決定棄用然后轉(zhuǎn)向Vue開發(fā)。這篇文章主要介紹了vue-cli腳手架引入彈出層layer插件的幾種方法，需要的朋友可以參考下2019-06-06
Vue3兼容大部分Vue2的特性，用Vue2代碼開發(fā)Vue3都可以，性能上面打包大小減少 41%，初次渲染快 55%，更新快 133%，內(nèi)存使用減少 54%,本篇文章主要介紹Vue3的7種種組件通信,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
這篇文章主要介紹了如何構(gòu)建一個Vue插件并生成npm包，幫助大家更好的理解和使用vue，方便以后的開發(fā)，感興趣的朋友可以了解下2020-10-10
watch是由用戶定義的數(shù)據(jù)監(jiān)聽，當(dāng)監(jiān)聽的屬性發(fā)生改變就會觸發(fā)回調(diào)，這項(xiàng)配置在業(yè)務(wù)中是很常用。在面試時，也是必問知識點(diǎn)，一般會用作和computed進(jìn)行比較。那么本文就來帶大家從源碼理解watch的工作流程，以及依賴收集和深度監(jiān)聽的實(shí)現(xiàn)2022-12-12
這篇文章主要介紹了Vue項(xiàng)目build后,圖片加載不出來的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue3項(xiàng)目中封裝axios的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue中的計(jì)算屬性和axios基本使用回顧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
在我們實(shí)際項(xiàng)目開發(fā)過程中，會非常頻繁地和 Vue 組件的生命周期打交道，接下來我們就從源碼的角度來看一下這些生命周期的鉤子函數(shù)是如何被執(zhí)行的,需要的朋友可以參考下面文章內(nèi)容2021-09-09
Vue中使用md5進(jìn)行數(shù)據(jù)加密的實(shí)現(xiàn)方法
在現(xiàn)代Web開發(fā)中,數(shù)據(jù)安全是一個不可忽視的重要環(huán)節(jié),Vue.js作為一個流行的前端框架,不僅提供了強(qiáng)大的數(shù)據(jù)綁定和組件化功能,還支持與各種后端服務(wù)的集成,本文將探討如何在Vue應(yīng)用中使用MD5算法來加密數(shù)據(jù),從而提升應(yīng)用的安全性,需要的朋友可以參考下2024-10-10