解決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)文章
Blob?對象表示一個不可變、原始數(shù)據(jù)的類文件對象，這篇文章主要介紹了vue使用blob下載文件遇到的問題記錄,需要的朋友可以參考下2024-02-02
使用Vue3的defineProps配合TypeScript的interface定義props類型,并通過withDefaults設(shè)置默認(rèn)值,使組件能安全訪問傳入的props數(shù)據(jù)2025-08-08
在vue中最常用的應(yīng)該就是axios了，這是一個很強(qiáng)大的處理ajax的庫。今天我就分享一下我是如何封裝axios的。axios的基本api不再贅述，提前安裝一下也不用我說了吧2021-06-06
這篇文章主要介紹了Jeeplus-vue?實現(xiàn)文件的上傳，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼
本文主要介紹了Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue對storejs獲取的數(shù)據(jù)進(jìn)行處理時遇到的幾種問題小結(jié)
這篇文章主要介紹了vue對storejs獲取的數(shù)據(jù)進(jìn)行處理時遇到的幾種問題小結(jié),需要的朋友可以參考下2018-03-03
在vue工程中,除開vue自帶的什么父子間,祖孫間通信,還有一個非常方便的通信方式,類似Vue2.x?使用?EventBus?進(jìn)行組件通信,而?Vue3.x?推薦使用?mitt.js,可以實現(xiàn)各個組件間的通信,所以本文給大家介紹了vue3使用mitt.js實現(xiàn)組件通信,需要的朋友可以參考下2024-05-05
Vue 防止短時間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請求的操作
這篇文章主要介紹了Vue 防止短時間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請求的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue動態(tài)綁定組件子父組件多表單驗證功能的實現(xiàn)代碼
這篇文章主要介紹了vue動態(tài)綁定組件子父組件多表單驗證功能的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了Vue前端整合Element?Ui,本節(jié)內(nèi)容服務(wù)于SpringBoot?+?Vue?搭建?JavaWeb?增刪改查項目，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07