Question

2周前，我开始使用Vuex，我意识到Vuex非常适合处理应用程序的状态。但是，很难处理API调用的错误。当我从服务器获取数据时，我将调度一个动作。当然，成功返回数据后，一切都会很好。但是，当发生错误时，我会更改状态，但我不知道如何通过Vuejs组件的状态检测到该错误并通知用户。有人可以给我一些建议吗？

Answer 1

我通常包括以下部分：

error-notification

vuex中指示错误状态的属性，通常是带有错误代码和消息的错误对象，例如error
商店中的一种突变，用于引发设置错误属性的错误，例如raiseError
商店中的一种变异，用于消除错误，清除错误属性，例如dismissError

使用这些，您需要：

根据商店中的error-notification显示error，<error-notification v-if="$store.state.error :error="$store.state.error"/>
发生错误时，请调用raiseError突变（在您的API回调中）：vm.$store.commit('raiseError', { code: 'ERR_FOO', msg: 'A foo error ocurred'})
在error-notification中，当通知关闭时调用dismissError变异。

Answer 2

您还可以在操作中返回一个承诺，这样，如果您从组件中调用它，则可以在那里捕获错误并根据需要显示通知：

在您的商店中：

//action
const fetch = (context) => {
    return api.fetchTodos() //api here return promise. You can also do new Promise(...)
        .then((response) => {
            context.commit('SET_TODOS', response);
        })

};

在Vue组件中：

this.$store.dispatch('todos/fetch', modifiedTodo)
    .catch(error => {
        //show notification
    })

Vuex如何处理API错误通知？

2 个答案: