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