Vuex如何处理API错误通知？

白龙

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

沃纳

我通常包括以下部分：

用于显示通知的组件，通常是警报或小吃店等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当通知关闭时调用变异。