如何在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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>

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

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

Nuxt的功能有所不同，但据我所知，您仍然不应该在getters周围使用函数包装器。