问Vuex如何处理api错误通知？

EN

我通常有以下几个部分：

• 一种用于显示通知的组件，通常是警报、快捷键或类似的，例如error-notification。我在高层使用这个组件，就在根应用程序组件下面。这取决于你的布局。
• 表示错误状态的vuex属性，通常是错误对象w/错误代码和消息，例如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突变。

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

在你的店里：

//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
    })