无法在模块之外访问 Vuex getter

Posted 2023-02-23

【中文标题】无法在模块之外访问 Vuex getter

【英文标题】：Can't access Vuex getters outside of modules

【发布时间】：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 , );

【参考方案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。 这个问题花了我一段时间才弄清楚。 干杯