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