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