Vuex命名空间模块使用mapGetters报错：未知getter: counter/count

嘿，我来帮你搞定这个「[vuex] unknown getter: counter/count」的报错问题！先帮你捋清楚问题出在哪，再给你对应的解决办法：

首先，找报错根源 #

看你的代码就能发现两个关键问题：

1. getter名称不匹配：你在counter.js里定义的getter叫getCount，但报错里写的是counter/count——名称对不上，Vuex当然找不到啦！
2. 命名空间模块的mapGetters用法有误：因为你的counter模块开启了namespaced: true，直接用普通的mapGetters写法是识别不到模块里的getter的。

两种正确的解决方式 #

方式一：给mapGetters指定命名空间前缀

直接把模块名作为第一个参数传给mapGetters，后面跟上你要映射的getter名称（注意是模块里定义的getCount哦）：

// App.vue的computed部分
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters('counter', ['getCount'])
    // 之后就可以通过this.getCount访问这个getter的值啦
  }
}

方式二：用对象形式映射指定完整路径

如果想给映射后的属性起个自定义名字（比如就叫count），可以用对象的形式，明确写出getter的完整命名空间路径：

// App.vue的computed部分
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters({
      count: 'counter/getCount' // 把counter模块的getCount映射为this.count
    })
  }
}

额外选项：修改模块里的getter名称 #

如果你就是想直接用counter/count这个路径，那可以修改counter.js里的getters定义，把getCount改成count：

// counter.js
const getters = {
  count: state => state.count // 这里把getCount替换成count
}

改完之后，就可以这样用mapGetters了：

...mapGetters('counter', ['count'])
// 或者
...mapGetters({
  count: 'counter/count'
})

内容的提问来源于stack exchange，提问作者Dmitriy Rudnik