如何在 Vuex 模块中使用 mapGetters

Question

我在store/index.js

中添加了模块

import NavMessage from './nav/message/index';
new Vuex.Store({
  modules: {
    NavMessage,
  },
});

我的message/index.js

import state from './state';
import getters from './getters';
import mutations from './mutations';

export default {
  state,
  getters,
  mutations,
};

这里是 getters

const getters = () => ({
  getCount: state => {
    return state.count;
  },
});

export default getters;

我正在尝试从 NavMessage/getCount

获取数据

...mapGetters({
    count: 'NavMessage/getCount',
  }),

但我收到错误 unknown getter: NavMessage/getCount

帮帮我谢谢

Answer 1

下面是一个工作示例。

我做了两个重要的改变：

我已将 namespaced: true 添加到模块中。
我已经从 getters 周围删除了包装函数。

如果您不想使用命名空间，则需要将 mapGetters 参数改为 count: 'getCount'。只有命名空间需要 NavMessage/ 前缀。

const mapGetters = Vuex.mapGetters

const state = {
  count: 6
}

const getters = {
  getCount: state => {
    return state.count
  }
}

const mutations = {}

const NavMessage = {
  namespaced: true,
  state,
  getters,
  mutations
}

const store = new Vuex.Store({
  modules: {
    NavMessage
  }
})

const app = new Vue({
  store,

  computed: {
    ...mapGetters({
      count: 'NavMessage/getCount',
    })
  }
})

console.log(app.count)

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>

您已使用 Nuxt 标记问题。如果您使用的是 Nuxt，我强烈建议您阅读他们的商店使用指南：

https://nuxtjs.org/guide/vuex-store

Nuxt 的做法略有不同，但据我所知，您仍然不应该在 getters 周围使用函数包装器。 namespaced: true 将自动添加，您不需要自己创建 new Vuex.Store。 Nuxt 自己创建商店并根据文件夹结构添加模块。

如何在 Vuex 模块中使用 mapGetters

How to use mapGetters with Vuex Modules

vue.js

vuex

nuxt.js

vuex-modules