Vuex 如何处理 api 错误通知？

Question

两周前我开始使用 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 returns a 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
    })