从 Vuex 操作向 Vuex getter 传递参数答案

【问题标题】：Passing parameters to Vuex getters from a Vuex action从 Vuex 操作向 Vuex getter 传递参数
【发布时间】：2019-06-11 08:58:33
【问题描述】：

我有一个 Vuex getter，我从应用程序中的各种组件调用它。但是，我发现一个案例在调用 getter 之前需要稍微复杂的逻辑，所以我正在使用 Vuex Action。如何使用我的操作中的参数调用 getter 函数？

我使用常量来命名 getter/mutations/actions，所以我的 getter 定义如下：[GETTER_NAME]: state => param => { return {/.../} }。在我的 Vuex 操作中，我想按如下方式调用 getter getters[GETTER_NAME](someParam)。但是，这似乎不起作用（即使 getters[GETTER_NAME] 返回一个函数）。

从组件调用 getter 可以正常工作。我只是创建computed 函数并使用...mapGetters({getterName: GETTER_NAME})。要使用参数调用 getter，我只需说 getterName(someParam)。

[GETTER_NAME]: state => param=> {
    return {/.../}
},

[ACTION_NAME]: (context, param) => {
    getters[GETTER_NAME](param)
      ? context.commit(MUTATION_X, param)
      : context.commit(MUTATION_Y, param);
}

getter 被调用，但是，它返回函数而不传入参数。我做错了什么还是我误解了 getter 在 Vuex 中的工作方式？

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

您需要在 actions 内拨打 context.getters[GETTER_NAME](someParam) 之类的电话。

[GETTER_NAME]: state => param=> {
return {/.../}
},

[ACTION_NAME]: (context, param) => {
   context.getters[GETTER_NAME](param)
     ? context.commit(MUTATION_X, param)
     : context.commit(MUTATION_Y, param);
}

【讨论】：

【解决方案2】：

在动作中注入了参数：dispatch、commit、getters 和 rootState。因此，您可以像这样访问 getter：

ACTION_NAME: ({ commit, getters }, payload) => {
    let MY_VARIABLE = getters.GETTER_NAME(payload)
    console.log(MY_VARIABLE)
}

即使您尝试从不同的模块访问 getter，这也可以正常工作。虽然您可以通过 context.getters 使用带有上下文的 getter，但以这种方式使用它时，动作内部的语法会有点长。

【讨论】：