如何在 Vuex 模块中使用 mapGetters

Question

我在store/index.js添加了模块

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

我的消息/index.js

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

export default {
  state,
  getters,
  mutations,
};

这里是吸气剂

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

export default getters;

我正在尝试从NavMessage/getCount 获取数据

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

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

帮我谢谢

Answer 1

下面是一个工作示例。

我做了两个重要的改变：

1. 我已将namespaced: true 添加到模块中。
2. 我已从 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 自己创建 store 并根据文件夹结构添加模块。