Передача ссылки метода компонента на действие в Vuex

Question

Я ищу способ изменить некоторые значения данных внутри компонента в случае сбоя вызова API, выполненного действием vuex. В настоящее время я делаю это, добавляя try-catch внутри своих действий и выбрасывая ошибку, а затем перехватываю ошибку внутри компонента, используя другой try-catch. Примерно так:

Компонент 1

async method() {
 try {
    this.VUEX_ACTION();
 }
  catch (e) {
    /* this method changes the values inside data */
    this.componenntMethodToExecute();
 }
}

Vuex

VUEX_ACTION() {
 try {
   API_CALL()
 }
 catch (e) {
   throw e;
 }
}

Проблема с этим подходом заключается в том, что мне приходится заключать все вызовы действий в магазине в компоненты внутри попробуйте снова и снова. Одно решение, которое я нашел, это подписаться на действия / мутации в Vuex и соответственно изменить мои данные внутри компонента. Но опять же, это потребует добавления подписчиков в компоненты.

Кроме того, я не могу сохранить все свои значения данных компонента в Vuex, так как я использую / изменяю много значений данных в своем компоненте и перемещаю их в Vuex. потребовалось бы иметь собственные действия / мутации.

Другой способ, которым я пытался выполнить свою работу, - это передача функции из компонента в Vuex путем привязки контекста функции this к текущему компоненту. Эта функция изменяет значения данных, которые я хочу изменить. Это делает мою работу, но Я не уверен, будет ли хорошей практикой передавать ссылку функции на vuex . Можете ли вы предложить лучшее решение или это go об этом?

Answer 1

Я не уверен, что правильно понял вашу проблему. Вы ищете что-то подобное?

Vuex:

VUEX_STATE: {
    e: {}
}
VUEX_MUTATIONS: {
    e: (state, e) => state.e = e
}
VUEX_GETTERS: {
    error: state => state.e
}
VUEX_ACTIONs: {
    apiCall({ commit }) {
        try {
            API_CALL()
        }
        catch (e) {
            commit('e', e)
        }
    }
}

Vue компонент scripts. mapGetters(['error']) нужно будет включать только в компоненты, в которых вы хотите показать ошибку. mapGetters(['apiCall']) нужно включать только в компоненты, для которых вы хотите вызывать действия vuex.

computed: {
    ...mapGetters([
        'error'
    ]),
    changeDataValueHere() return this.error ? 'changed' : 'value if no error from api call',
    altChangedDataValuesHere() return this.error ? {a: 'changed', b: 'changed' ...} : {a: 'unchanged', b: 'unchanged' ...}
},
methods: {
    ...mapActions([
        'apiCall'
    ])
    apiAction() {
        this.apiCall
    }
}

Таким образом, нет необходимости в блоке try-catch в компоненте.