在 getter 中命名空间的 Vuex 名称函数答案

【问题标题】：Vuex name function with namespaced in getters在 getter 中命名空间的 Vuex 名称函数
【发布时间】：2020-06-27 13:50:03
【问题描述】：

您好，我需要创建具有有效负载的函数。在我创建的 Vuex 中：

const getters = {
  [GettersTeam.GET_TEST](state) {
    return state.teams;
  },
  [GettersTeam.GET_TEAM]: state => id => {
    console.log("Run function!");
    console.log(id);
    return state.teams;
  },
};

接下来我在组件中使用这个函数：

mounted() {
    this.GET_TEAM(1);
},
methods: {
    ...mapGetters('TeamModule', [GettersTeam.GET_TEAM]),
},

函数this.GET_TEAM(1) 没有返回。我的问题在于名称函数[GettersTeam.GET_TEAM]，但我不知道如何使用命名空间命名函数。函数this.GET_TEST() 工作正常。

编辑：

我将函数从 methods 移动到 computed。

computed: {
    ...mapGetters('TeamModule', {
        teamList: [GettersTeam.GET_TEAM],
    }),
},

<template>
    <div>
        teamList: {{ teamList }}
    </div>
</template>

但是当我尝试在模板中使用 teamList 时，Vue 向我返回了这个：

teamList: function (id) { console.log(id);返回 state.teams； }

【问题讨论】：

GettersTeam.GET_TEAM 是字符串吗？不应该只是mapGetters('TeamModule', GettersTeam.GET_TEAM)（即没有[ 和]）吗？
@DelenaMalan 否，如果您删除 [] vuex 返回错误：映射器参数必须是数组或对象
哦，对了。如果GettersTeam.GET_TEAM 已经包含命名空间，那么只使用mapGetters([GettersTeam.GET_TEAM]) 怎么样？另外，如果您不将其包含在您的mapGetters 中，this.GET_TEST() 怎么会起作用？我想也应该是this[GettersTeam.GET_TEAM](1)。

标签： vue.js ecmascript-6 vuex

【解决方案1】：

您需要将mapGetters 放入您的computed 部分，而不是methods：

computed: {
    ...mapGetters('TeamModule', [GettersTeam.GET_TEAM]),
},

https://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper

这似乎有点违反直觉，因为您将它作为一种方法来调用，但从组件的角度来看，它仍然只是一个属性。恰好该属性返回一个函数。

更新：

基于新问题...

在您的模板中，您有 {{ teamList }}。这将获取属性this.teamList 的价值。

this.teamList 属性是一个计算属性，所以 Vue 会在后台调用定义函数。该定义函数是由 mapGetters 创建的，但它实际上只是调用 store getter，将相关的 state 对象传递给它。

你已经像这样定义了 getter：

[GettersTeam.GET_TEAM]: state => id => {

忽略括号中的位，这里不重要。关键位是state => id => { 部分。这里有两个函数，一个被另一个返回。

实际上相当于这样：

[GettersTeam.GET_TEAM] (state) {
  return function (id) {
    console.log("Run function!");
    console.log(id);
    return state.teams;
  }
}

因此，当您访问计算属性时，您将调用该外部函数。它将返回内部函数，这就是您所看到的模板。

要获取内部函数返回的值，您需要调用它。例如：

{{ teamList(1) }}

我还要注意，您当前的 getter 实现只是忽略了id。目前尚不清楚您要做什么，但我假设您打算基于 id 执行搜索以在 state.teams 中查找特定条目。

【讨论】：

【解决方案2】：

为你做了一个Codepen。

您的mapGetters 呼叫应为mapGetters([GettersTeam.GET_TEAM])，而您的this.GET_TEAM(1); 呼叫应为this[GettersTeam.GET_TEAM](1);。

【讨论】：