时间戳

首页 > 解决方案 > 将组件的方法引用传递给 Vuex 中的操作

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

问题描述

如果 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 是否是一种好习惯。您能否提出一个更好的解决方案，或者这是解决问题的方法？

标签： javascriptvue.jsvuex

解决方案

我不确定我是否正确理解了您的问题。你在寻找这样的东西吗？

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

推荐阅读