Vuex는 API 오류 알림을 처리하는 방법을 알려 주시겠습니까?

Vuex는 API 오류 알림을 처리하는 방법을 알려 주시겠습니까?

2주 전부터 Vuex를 사용하기 시작했는데 Vuex가 앱 상태를 처리하기에 매우 좋다는 것을 알게 되었습니다.그러나 API 호출 에러는 처리하기가 어렵습니다.서버로부터 데이터를 취득하면, 액션을 디스패치 합니다.물론 데이터가 정상적으로 반환되면 모든 것이 정상입니다.그러나 오류가 발생하면 상태가 변경됩니다. 사용자에게 알리기 위해 Vuejs 구성 요소에서 상태를 통해 오류를 감지하는 방법을 알 수 없습니다.누가 조언 좀 해줄래?

일반적으로 다음과 같은 부품이 있습니다.

• 통보를 표시하는 컴포넌트(일반적으로 경보 또는 스낵바 등).error-notification이 컴포넌트는 root app 컴포넌트 바로 아래 높은 레벨에서 사용합니다.이것은 레이아웃에 따라 다릅니다.
• 오류 상태를 나타내는 vuex 속성입니다.일반적으로 오류 코드와 메시지가 포함된 오류 개체입니다.예를 들어 다음과 같습니다.error
• 에러 속성을 설정하는 에러를 발생시키기 위한 스토어의 1개의 돌연변이.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
    })

언급URL : https://stackoverflow.com/questions/52988261/vuex-how-to-handle-api-error-notification