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