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,
};

这是吸气剂

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

1 个答案: