无法在模块外访问 Vuex getter

Question

我无法从组件中的一个 Vuex 模块访问 getters，即使我可以在 Vue Dev Tools 中看到 getter。

我的 store.js 文件：

import Vue from 'vue';
import Vuex from 'vuex';
import subsub from './modules/subsub';

Vue.use(Vuex);
export default new Vuex.Store({
  state: { },
  actions: { },
  mutations: { },
  getters: { },
  modules: {
    subsub,
  },
});

我的 modules/subsub.js 文件：

const state = {
  categories: [{
    name: 'one',
    path: 'two',
    ...
  }, {
    name: 'twocat',
    path: 'two',
    ...
  }],
};

const actions = { };
const mutations = { };
const getters = {
  filterCategories(state) {
    return state.categories;
  },
  filtertwo(state) {
    const filteri = state.categories.filter((catee) => {
      return catee.name === 'twocat';
    });
    return filteri;
  },
};

export default {
  namespaced: true,
  state,
  actions,
  mutations,
  getters,
};

我的组件：

<template>
  <div> {{ filterCategories }} </div>
</template>

<script>    
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'categories',
      'filtertwo',
      'filterCategories',
    ]),
    filtertwo() {
      return this.$store.getters.filtertwo;
    },
    filterCategories() {
      return this.$store.getters.filterCategories;
    },
  },

</script>

所以，我缺少什么？是否有任何其他语法可用于从模块访问 getters？

Answer 1

首先，您没有 categories 的 getter，因此您需要添加一个。

其次，您的 subsub 模块的 namespaced 属性设置为 true。这意味着您需要向 mapGetter 助手提供模块名称：

...mapGetters('subsub', [
  'categories',
  'filtertwo',
  'filterCategories',
]),

第三，mapGetters 函数为您创建 filtertwo 和 filterCategories 计算属性。但是，您正在手动重新定义它们，返回对 $store.getters 的显式引用。但是，您没有正确引用命名空间，因此它们返回 undefined。要么去掉这些计算属性，要么正确引用命名空间：

filtertwo() {
  return this.$store.getters['subsub/filtertwo'];
},
filterCategories() {
  return this.$store.getters['subsub/filterCategories'];
},

Answer 2

我找到了解决方案，感谢@thanksd 的提示

通过使用上面的示例，其中 namespaced 设置为 true，我必须将以下内容添加到组件中

filterCategories() {
      return this.$store.getters['subsub/filterCategories'];
    },

否则，如果我不想添加 subsub，我可以将命名空间设置为 false。这个问题花了我一段时间才弄清楚。干杯

无法在模块外访问 Vuex getter

Can't access Vuex getters outside of modules

javascript

vue.js

vuejs2

vue-component

vuex