无法访问模块外的Vuex getter

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

首先,你没有getter categories,所以你需要添加一个.

其次,您的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'];
},