解決vue報(bào)錯(cuò):Do?not?mutate?vuex?store?state?outside?mutation?handlers問(wèn)題
vue報(bào)錯(cuò):Do not mutate vuex store state outside mutation handlers
原因
在vuex store的state外部直接修改了state的值，但是Vuex要求所有的state的修改必須在vuex中，不允許直接咋組件中修改store中的狀態(tài)，除非通過(guò)mutation來(lái)進(jìn)行。
解決方法
通過(guò)提交一個(gè)mutation來(lái)修改store中的狀態(tài)。
首先在store中定義一個(gè)mutation來(lái)觸發(fā)這個(gè)mutation。
例如
在store中定義mutation：
mutations: {
removeTab(state, tabName) {
state.mainTabs = state.mainTabs.filter(item => item.name !== tabName)
}
}
在組件中提交mutation：
let tabName = _this.$store.state.common.menuActiveName
this.$store.commit('removeTab', tabName)
這樣就可以避免直接修改store中的狀態(tài)而引發(fā)的錯(cuò)誤。
通過(guò)mutation來(lái)修改store中的狀態(tài)是VueX的最佳實(shí)踐，可以確保狀態(tài)的改變是可追蹤和可控的。
在上面示例中，組件定義了一個(gè)removeTab方法，該方法通過(guò)this.$store.commit('removeTab', tabName)來(lái)提交名為'removeTab'的mutation，并傳遞了要刪除的tab的名稱tabName。
這樣就能夠在vuex store中正確地修改mainTabs的狀態(tài)，而不會(huì)觸發(fā)"Do not mutate vuex store state outside mutation handlers"錯(cuò)誤
代碼
.vue文件中的代碼：
/store/index.js代碼：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了v-model的基本用法解析，幫助大家更好的理解和學(xué)習(xí)vue v-model的使用方法，感興趣的朋友可以了解下2020-10-10
vue使用Google地圖的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue使用Google地圖的實(shí)現(xiàn)示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
vuecli+AXdownload下載組件封裝?+css3下載懸浮球動(dòng)畫(huà)效果
當(dāng)觸發(fā)下載功能的時(shí)候,會(huì)觸發(fā)一個(gè)下載動(dòng)畫(huà),下載懸浮球會(huì)自動(dòng)彈出,并且閃爍提示有新的下載任務(wù)直到下載任務(wù)完場(chǎng)提示,接下來(lái)通過(guò)本文介紹vuecli+AXdownload下載組件封裝?+css3下載懸浮球動(dòng)畫(huà)效果,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
TinyMCE是一款易用、且功能強(qiáng)大的所見(jiàn)即所得的富文本編輯器,跟其他富文本編輯器相比,有著豐富的插件,支持多種語(yǔ)言,能夠滿足日常的業(yè)務(wù)需求并且免費(fèi),本文小編給大家詳細(xì)介紹了Vue中tinymce富文本功能配置,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue 出現(xiàn)data-v-xxx的原因及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue 實(shí)現(xiàn)axios攔截、頁(yè)面跳轉(zhuǎn)和token 驗(yàn)證
這篇文章主要介紹了vue 實(shí)現(xiàn)axios攔截、頁(yè)面跳轉(zhuǎn)和token 驗(yàn)證，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解
今天小編就為大家分享一篇Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)視圖原理
這篇文章主要介紹了淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)視圖原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02