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其它都是復數(shù)
vue組件使用vuex中的mutations方法報錯，報unknown mutation type的錯誤
報錯：【vuex】 unknown mutation type: mutation
vuex如果分為幾個模塊，方法是在某個模塊中的話，如果直接在組件中通過this.$store.commit('方法名')是獲取不到的，必須要在前面加上模塊名，如this.$store.commit('模塊名/方法名')才可以獲取到。
在項目當中，我當前組件的vuex寫在store/DataMonitorStore/DataMonitorStore.js里的，所以這里必須加上模塊名。
當前組件是sliderBar.vue頁，我需要在這個頁面把數(shù)據(jù)存到vuex里面
使用this.$store.commit()方法進行存儲
當著組件是yearQueryContent.vue頁，我需要在這個頁面獲取之前存儲到vuex里的數(shù)據(jù)
使用this.$store.state.DataMonitorStore.value進行獲取，同時注意這里的DataMonitorStore也是
模塊名，一開始我在獲取時沒有寫模塊名，導致取出的數(shù)據(jù)一直是undefined。
同時在該組件中還需要用到watch監(jiān)聽事件，去監(jiān)聽values是否有變化，若變化 則修改對應的src值。
vuex里面的內(nèi)容如下：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解vue項目首頁加載速度優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue使用?vue-socket.io三種方式及踩坑實例解析
這篇文章主要為大家介紹了vue使用?vue-socket.io三種方式及踩坑實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法
下面小編就為大家分享一篇淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于vue-router懶加載的3種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
跨域，跨的是不同域，也就是協(xié)議或主機或或端口號不同造成的現(xiàn)象，本文給大家分享vue3解決跨域問題詳細代碼親測有效，感興趣的朋友跟隨小編一起看看吧2022-11-11
在現(xiàn)代Web開發(fā)中,經(jīng)常需要從其他網(wǎng)頁獲取并解析內(nèi)容,本文將詳細介紹如何在Vue項目中實現(xiàn)這一功能,感興趣的小伙伴可以跟隨小編一起學習一下2025-03-03
Vue監(jiān)聽Enter鍵的方法總結(jié)與區(qū)別
這篇文章主要給大家介紹了關(guān)于Vue監(jiān)聽Enter鍵的方法與區(qū)別的相關(guān)資料,在Vue中我們可以通過監(jiān)聽鍵盤事件來實現(xiàn)回車鍵切換焦點的功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
Vue3使用pinia進行數(shù)據(jù)添加、修改和刪除的操作代碼
Pinia?是?Vue?3?的官方狀態(tài)管理庫,旨在提供一種簡單、靈活且類型安全的狀態(tài)管理解決方案,Pinia?的設計理念與?Vuex?類似,但更加輕量且易于使用,文旨在全面解析?Vue?3?中如何使用?Pinia?進行數(shù)據(jù)的添加、修改和刪除,需要的朋友可以參考下2025-03-03
Vue3純前端實現(xiàn)Vue路由權(quán)限的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue3純前端實現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用Vue3具有一定的參考學習價值,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue使用高德地圖實現(xiàn)實時天氣預報功能,根據(jù)定位功能，使用高德地圖實現(xiàn)定位當前城市的天氣預報功能，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-05-05