Question

嗨，我需要具有有效负载的create函数。在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>

但是当我尝试在模板Vue中使用teamList时，我得到了这个信息：

teamList：函数（id）{console.log（id）;返回state.teams; }

Answer 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创建的，但实际上它只是调用商店的getter，并向其传递相关的state对象。

您已经这样定义了吸气剂：

[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中查找特定条目。

Answer 2

为您制作了Codepen。

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

Vuex名称函数，在getter中具有命名空间

2 个答案: