Как я могу ссылаться на vuex «константные» именованные действия с переменными?

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

Как вы заметили, когда вы передали FETCH_${this.person}_LIST в dispatch, тип отправленного действия - это конкатенированное имя константы, а не фактическое значение константы.

Чтобы получить фактическое значение вашей постоянной переменной, вы можете использовать функцию eval.

Из документов MDN :

Аргументом функции 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 2

Я использую эту структуру в моем магазине Vuex. Многие из моих действий отправляются с использованием объединенной строки в качестве аргумента. Но мои действия объявлены так:

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

Тогда я могу отправить вот так:

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

Answer 3

Есть ли что-то странное в вашем коде. Удалите (state), потому что действия получают объект context, который в вашем случае вы разрушаете в параметрах. ({commit}).

Установите как это и дайте мне знать, если это работает.

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

Answer 4

Вы пробовали использовать mapActions? Это может работать на то, что вы хотите. Полезная ссылка: Как настроить карту VueActions