将组件方法引用传递给 Vuex 中的操作

Question

如果 vuex 操作进行的 API 调用失败，我正在寻找一种方法来更改组件内的某些数据值。目前，我通过在我的操作中添加一个 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;
 }
}

这种方法的问题在于，我必须一次又一次地将所有存储操作调用包装在 try-catch 中的组件中。我发现的一种解决方案是订阅 Vuex 中的操作/突变，并相应地更改组件内的数据。但这又涉及在组件中添加订阅者。

此外，我无法将组件的所有数据值保留在 Vuex 中，因为我在组件中使用/更改了很多数据值，并且将它们移动到 Vuex 需要有自己的操作/突变。

我尝试完成工作的另一种方法是通过将函数的“this”上下文绑定到当前组件，将一个函数从组件传递到 Vuex。此函数更改我想要更改的数据值。它完成了我的工作，但 我不确定将函数的引用传递给 vuex 是否是一个好习惯。您能否提出一个更好的解决方案，或者这是解决问题的方法？

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 块了。