无法在模块之外访问 Vuex getter答案

【问题标题】：Can't access Vuex getters outside of modules无法在模块之外访问 Vuex getter
【发布时间】：2017-10-01 16:36:52
【问题描述】：

我无法从组件中的一个 Vuex 模块访问 getter，即使我可以在 Vue 开发工具中看到 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？

【问题讨论】：

您没有在控制台中收到任何错误？实例化Vue的时候是不是在store里路过？
我在控制台中没有收到任何错误。当我实例化 Vue 时，你的意思是在商店中传递什么？ ..顺便说一句，我尝试使用 @click 事件作为 getter 并且甚至没有工作
无论你在哪里实例化主应用程序 Vue 组件（可能是 main.js）。您应该导入 vuex 存储并将其包含在通过 new Vue({...}) 传递的配置对象中
/* eslint-disable no-new */ new Vue({ el: '#app', router, store, template: '', components: { App, Icon }, });

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案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'];
},

【讨论】：

在我的 vuex 开发工具中，我看到了这个： subsub/filterCategories:Array[2] ' subsub/filterCategories:Array[2] 0:Object 1:Object subsub/filtertwo:Array[1] 0:对象'
我刚刚添加了 subsub，因为我的命名空间属性设置为 true（为此我不知道），但我仍然没有将任何数据输入到我的组件中，并且在使用 Vue Dev 工具时进入 Vuex 选项卡我看到了吸气剂，但是一旦我在组件选项卡中进入我的路由器视图，我得到： filterCategories:undefined filtertwo:undefined
@Marketingexpert，我没有注意到您正在重新定义 filterCategories 和 filterTwo 计算属性。这就是为什么你仍然收到undefined。您应该使用mapGetters 或手动创建计算属性，但不能同时使用两者。请参阅我的更新答案。
您更新的问题现在对我来说很有意义；）我非常感谢您的时间和帮助。学到了很多
@Marketingexpert 很高兴为您提供帮助

【解决方案2】：

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

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

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

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

【讨论】：