Question

我无法从我的组件中的某个Vuex模块访问getter，即使我可以在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>

那么，我错过了什么？是否还有其他语法可以从模块访问getter？

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

我找到了解决方案，thnx来自@thanksd的提示

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

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

否则，如果我不想添加subsub，我可以将namespaced设置为false。这个问题花了我一段时间来解决这个问题。干杯

无法在模块之外访问Vuex getter

2 个答案: