VueX 스토어의 VueJ 오류 처리 모범 사례

VueX 스토어의 VueJ 오류 처리 모범 사례

Vue에서의 오류 처리 방법에 문제가 있습니다.현재 VueX의 try/catch 블록을 사용하여 비동기 콜을 발신하고 있습니다.캐치 블록은 글로벌 토스트에 오류를 추가하는 작업을 처리합니다.아주 잘 되고 있어요.

async add({ dispatch }, form) {
  try {
    await firebase.add(form)
    dispatch('getUpdatedList')
  } catch (error) {
    // Use the global error handle to handle the error
    dispatch('error', error)
  }
}, 
error ({ dispatch, commit }, errorMessage) {
  console.log(errorMessage)
  commit('ERROR', errorMessage)      
}
// Add the Errors here
ERROR (state, val) {
  state.errors = [val, ...state.errors]
},

문제는 다음과 같습니다.그 에러가 블록에 잡히면 에러가 컴포넌트에 전파되지 않기 때문에 컴포넌트의 에러를 원하는 방법으로 처리할 수 없습니다.예를 들어 클라이언트가 양식을 제출했지만 어떤 이유로 실패해도 약속 블록은 계속 실행됩니다.따라서 클라이언트에서 폼을 리셋하거나 리다이렉트를 중지하거나 UI를 정리할 수 없습니다.

this.$store
    .dispatch('add', this.data)
    .then(() => {
      //This gets hit no matter what the result
      this.showSuccess = true
    })
    .catch(() => {
      // More UI stuff
      //Can only hit this when rethrowing the error
      this.showLoading = false
      this.showRegisterButton = true
    })

에러를 재발송하는 것으로 이 문제를 회피할 수 있다는 것은 알고 있습니다만, 이것이 최선의 방법은 아닌 것 같습니다.왜냐하면 저는 항상 에러를 재발송송하는 것은 나쁜 방법이라고 믿어왔기 때문입니다(여기서는 적절한 해결책이라고 생각됩니다).심플한 것이 있습니까?

한 가지 수정사항만 있으면 충분합니다.

에러를 재투입하면, 다음의 방법으로 부모로부터 캐치 할 수 있습니다.throw error

async add({ dispatch }, form) {
  try {
    await firebase.add(form)
    dispatch('getUpdatedList')
  } catch (error) {
    // Use the global error handle to handle the error
    dispatch('error', error)
    // throw the handled error for another handler to catch
    throw error
  }
}

언급URL : https://stackoverflow.com/questions/64322418/vuejs-error-handling-in-vuex-store-best-practices