Vuex报错之[vuex] unknown mutation type: handlePower问题及解决

 更新时间:2023年07月04日 10:01:24   作者:碎碎。  
这篇文章主要介绍了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里面的内容如下:

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现目录树结构

    vue实现目录树结构

    这篇文章主要为大家详细介绍了vue实现目录树结构,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue中的计算属性与监听属性

    Vue中的计算属性与监听属性

    这篇文章介绍了Vue中的计算属性与监听属性,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • Vue3学习笔记之依赖注入Provide/Inject

    Vue3学习笔记之依赖注入Provide/Inject

    provide和inject可以实现嵌套组件之间进行传递数据,这两个函数都是在setup函数中使用的,下面这篇文章主要给大家介绍了关于Vue3学习笔记之依赖注入Provide / Inject的相关资料,需要的朋友可以参考下
    2023-05-05
  • 详解vue-cli3多页应用改造

    详解vue-cli3多页应用改造

    这篇文章主要介绍了详解vue-cli3多页应用改造,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • 编写 Vue v-for 循环的 7 种方式

    编写 Vue v-for 循环的 7 种方式

    这篇文章主要分享可编写 Vue v-for 循环的 7 种方式,在Vue中,基本上每个项目都会用到v-for循环。它们允许你在模板代码中编写for循环,接下来一起看看下面文章的详细介绍吧

    2021-12-12
  • 使用vue编写h5公众号跳转小程序的实现代码

    使用vue编写h5公众号跳转小程序的实现代码

    这篇文章主要介绍了使用vue编写h5公众号跳转小程序,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • vue中el-table表格的表头操作代码

    vue中el-table表格的表头操作代码

    本文通过实例代码介绍对el-table表格的表头操作方法,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • vue多页面项目实现版本快照功能示例详解

    vue多页面项目实现版本快照功能示例详解

    这篇文章主要为大家介绍了vue多页面项目实现版本快照功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • vue2.0实现点击其他区域关闭自定义div功能

    vue2.0实现点击其他区域关闭自定义div功能

    这篇文章主要介绍了vue2.0实现点击其他区域关闭自定义div功能实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • vue设计与实现合理的触发响应

    vue设计与实现合理的触发响应

    这篇文章主要为大家介绍了vue设计与实现合理的触发响应示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08

最新评论