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

  • Post author:
  • Post category:vue




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

报错就解决了



版权声明:本文为qq_44979541原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。