Vuex報錯之[vuex] unknown mutation type: handlePower問題及解決
vuex報錯[vuex] unknown mutation type: handlePower
報錯截圖
相關(guān)代碼
//--------------------- store.js -----------------
...
const mutation = {
handlePower: (state, power) => {
state.power = power
localStorage.setItem('power', power)
}
}
const store = new Vuex.Store({
...
mutation
})
//--------------------- login.vue -----------------
this.$store.commit('handlePower', res.data.data)
//--------------------- 在nav.vue中獲取 -----------------
console.log(this.$store.getters.power)原因（想給自己一個嘴巴子那種）
在vuex中沒有mutation，有的是mutations，把上面的mutation修改為mutations即可
ps： vuex中除了state其它都是復(fù)數(shù)
vue組件使用vuex中的mutations方法報錯，報unknown mutation type的錯誤
報錯：【vuex】 unknown mutation type: mutation
vuex如果分為幾個模塊，方法是在某個模塊中的話，如果直接在組件中通過this.$store.commit('方法名')是獲取不到的，必須要在前面加上模塊名，如this.$store.commit('模塊名/方法名')才可以獲取到。
在項目當(dāng)中，我當(dāng)前組件的vuex寫在store/DataMonitorStore/DataMonitorStore.js里的，所以這里必須加上模塊名。
當(dāng)前組件是sliderBar.vue頁，我需要在這個頁面把數(shù)據(jù)存到vuex里面
使用this.$store.commit()方法進行存儲
當(dāng)著組件是yearQueryContent.vue頁，我需要在這個頁面獲取之前存儲到vuex里的數(shù)據(jù)
使用this.$store.state.DataMonitorStore.value進行獲取，同時注意這里的DataMonitorStore也是
模塊名，一開始我在獲取時沒有寫模塊名，導(dǎo)致取出的數(shù)據(jù)一直是undefined。
同時在該組件中還需要用到watch監(jiān)聽事件，去監(jiān)聽values是否有變化，若變化 則修改對應(yīng)的src值。
vuex里面的內(nèi)容如下：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-pdf如何通過文件流預(yù)覽pdf文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在Vue3中,頁面訪問攔截（Navigation?Guards）是一種常見的路由控制機制,那么Vue3具體是如何實現(xiàn)這一功能的呢,下面就跟隨小編一起來學(xué)習(xí)一下吧2024-03-03
vue el-switch綁定數(shù)值時需要注意的問題
在Vue中使用`el-switch`組件時,綁定數(shù)值類型時應(yīng)使用布爾值（true/false）,而綁定字符串類型時應(yīng)使用字符串（'true'/'false'）2024-12-12
Vue.js第三天學(xué)習(xí)筆記（計算屬性computed）
這篇文章主要為大家詳細介紹了Vue.js第三天的學(xué)習(xí)筆記，vue.js計算屬性computed,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new?Vue()?開始就是vue生命周期的開始。Vue?實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom?->?渲染、更新?->?渲染、卸載?等?系列過程,稱這是Vue的?命周期2022-08-08
本文主要介紹了mini-vue渲染的簡易實現(xiàn)，主要簡單來實現(xiàn)一個虛擬dom渲染真實dom，以及更新的方法。具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue 通過下拉框組件學(xué)習(xí)vue中的父子通訊
這篇文章主要介紹了vue 通過下拉框組件學(xué)習(xí)vue中的父子通訊的相關(guān)知識,文中涉及到了父組件，子組件的實現(xiàn)代碼，需要的朋友可以參考下2017-12-12
這篇文章主要為大家介紹了vue前端實現(xiàn)打印下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue重試機制示例，重試指的是當(dāng)加載出錯時，有能力重新發(fā)起加載組件的請求。異步組件加載失敗后的重試機制，與請求服務(wù)端接口失敗后的重試機制一樣2023-01-01
antd?vue中,如何在form表單中的自定義組件使用v-decorator
antd?vue中,在form表單中的自定義組件使用v-decorator問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04