Vuex报错之[vuex] unknown mutation type: handlePower问题及解决
作者:碎碎。
这篇文章主要介绍了Vuex报错之[vuex] unknown mutation type: handlePower问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vuex报错[vuex] unknown mutation type: handlePower
报错截图
相关代码
//--------------------- 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其它都是复数
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页,我需要在这个页面把数据存到vuex里面
使用this.$store.commit()方法进行存储
当着组件是yearQueryContent.vue页,我需要在这个页面获取之前存储到vuex里的数据
使用this.$store.state.DataMonitorStore.value进行获取,同时注意这里的DataMonitorStore也是
模块名,一开始我在获取时没有写模块名,导致取出的数据一直是undefined。
同时在该组件中还需要用到watch监听事件,去监听values是否有变化,若变化 则修改对应的src值。
vuex里面的内容如下:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。