[vuex] unknown mutation type: XXX/XXX 报错解决方法

unknown getter: XXX/XXX 报错解决方法

今天,用vuex中的Module来分割多个模块的时候,碰到了一个bug,今天,跟大家分享一下,先看一下报错内容吧
在这里插入图片描述
在这里插入图片描述

我的代码结构是这样的
在这里插入图片描述
index是主文件,liuxu和test是分割出来的,然后index.js里面引入这两个js
在这里插入图片描述
当我调用这两个模块中的mutations的时候,出现上面的报错,我的代码是这样写的
在这里插入图片描述
因为分模块了,所以我要调用liuxu或者test下面的mutations,然后就报错了,但是,如过我这样写就没问题this.$store.commit(‘changeHeight’),但是如果我这样写,分模块的意义何在,研究了半天,突然看到官方文档,文档说

默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

这时候我明白了,this.$store.commit(‘changeHeight’)是注册在全局命名空间的,如果用this.$store.commit(‘liuxu/changeHeight’) 肯定报错,怎么解决呢,官方说了,你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块,于是,我这样写了

在这里插入图片描述
加上namespaced: true的话,当模块被注册后,它的所有 getter、action 及 mutation 我们就可以通过以下方式来写了,例如

this.$store.commit('liuxu/changeHeight') // => liuxu/changeHeight

报错就解决了

  • 41
    点赞
  • 57
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 20
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Liux-

你的鼓励很重要

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值