Vuex, как обрабатывать уведомления об ошибках API?

Question

Я начал работать с Vuex 2 недели назад и понял, что Vuex очень хорошо справляется с состоянием приложения.Но трудно справиться с ошибкой вызовов API.Когда я получаю данные с сервера, я отправляю действие.Когда данные успешно возвращены, конечно, все в порядке.Но когда происходит ошибка, я меняю состояние, я не знаю, как обнаружить его через состояние от компонентов Vuejs, чтобы уведомить пользователя.Может ли кто-нибудь дать мне совет?

Answer 1

У меня обычно есть следующие части:

• Компонент для отображения уведомления, как правило, предупреждение или закусочная или аналогичные, например, error-notification.Я использую этот компонент на высоком уровне, прямо под корневым компонентом приложения.Это зависит от вашего макета.
• Свойство в vuex, указывающее состояние ошибки, обычно это объект ошибки с кодом ошибки и сообщением, например, error
• Одна мутация в хранилище для поднятияerror, устанавливающий свойство error, например, raiseError
• Одна мутация в хранилище для устранения ошибки, очищающей свойство error, например, 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, когда уведомление закрыто.