Question

我在vuex商店中有一个操作，如下所示：

 [FETCH_ADAM_BROWN_LIST](state)({commit}) {
     /* Action logic */
 },

我想访问类似的名称操作，例如FETCH_CHRIS_MATHISON_LIST使用类似这样的变量：

this.$store.dispatch(`FETCH_${this.person}_LIST`);

但是这会引发错误：

VM90646:37 [vuex] unknown action type: FETCH_ADAM_BROWN_LIST

但是当我指定一个常量时它将起作用：

this.$store.dispatch(FETCH_ADAM_BROWN_LIST);

如何使用变量访问“常量”命名动作？

Answer 1

您是否尝试过使用mapActions？那可以为您想要的工作。有用的链接：How to configure Vue mapActions

Answer 2

如您所见，当您将FETCH_${this.person}_LIST传递给dispatch时，调度的操作类型是串联的常量名称，而不是常量的实际值。

要获取常量的实际值，可以使用eval函数。

来自MDN docs：

eval()函数的参数为string。如果字符串表示一个表达式，eval（）计算该表达式。

您可以像这样使用它：

const FETCH_ADAM_BROWN_LIST = 'customAction';

const person = 'ADAM_BROWN';
const actionToDispatch = `FETCH_${person}_LIST`;

console.log(eval(actionToDispatch)); // customAction

但是请谨慎使用eval。如果您绝对确定输入之前要对输入内容进行清理，那么这应该没问题。

Answer 3

我在Vuex商店中使用此结构。许多排雷行动是使用串联字符串作为参数调度的。但是我的动作是这样声明的：

setCurrentUser: function ({ dispatch, commit, getters, rootGetters }, userDB) {
  commit('setCurrentUser', userDB)
  dispatch('resetDashboards', userDB.dashboards)
}

然后，我可以这样发送：

let type = 'User'
this.$store.dispatch('setCurrent' + type)

Answer 4

您的代码中是否有一些奇怪的东西。删除(state)，使操作收到一个context对象，在您的情况下，该对象正在破坏参数。 ({commit})。

这样设置，让我知道是否可行。

[FETCH_ADAM_BROWN_LIST]({commit}) {
     /* Action logic */
 },

如何引用带有变量的vuex“常量”命名动作？

4 个答案: