vuex 작업의 오류를 vue 구성 요소로 전파하는 방법

vuex 작업의 오류를 vue 구성 요소로 전파하는 방법

모듈 저장소가 없고 작업 loginUser가 있으며, 권한 부여 헤더를 상태로 저장하여 사용자를 로그인하는 경우:

loginUser(context, user) {
      userService.login(user)
          .then(response => context.commit('SET_AUTHORIZATION', response.data))
          .catch(error => { throw error.response.data })
    }

문제는 로그인 컴포넌트의 에러가 필요하고 세션이 활성화되는 한 상점을 끈질기게 만들었기 때문에 해당 상태로 저장할 수 없다는 것이다.로그인 구성 요소의 제출 기능은 다음과 같다.

  async onSubmit() {
        let user = {
          username: this.username,
          password: this.password,
        }
        await this.$store.dispatch('loginUser', user)
              .catch(error => {
                  if(error.response.status === 401) this.loginError = error.message
                  else console.error(error)
        })
        await this.$router.push('/').then(() => location.reload())
      }
    },

이것은 단지 '무공천'을 던져줄 뿐이다.

당신은 당신의 약속으로부터 반환할 수 있다.loginUser다음과 같은 동작:

loginUser(context, user) {
  return new Promise((resolve, reject) => {
    userService.login(user)
      .then((response) => {
        context.commit('SET_AUTHORIZATION', response.data)
        resolve(response)
      })
      .catch((error) => {
        reject(error.response.data)
      })
  })
}

그런 다음 비동기식 업데이트를 할 수 있다.onSubmit()방법을 사용하여 오류를 포착한다.try..catch다음과 같다:

async onSubmit() {

  try {
    let user = {
      username: this.username,
      password: this.password,
    }
    await this.$store.dispatch('loginUser', user);
    await this.$router.push('/');
    location.reload();
  } catch (error) {
    if (error.response && error.response.status === 401) 
      this.loginError = error.message
    else 
      console.error(error)
  }

},

참조URL: https://stackoverflow.com/questions/61725781/how-to-propagate-an-error-from-vuex-action-to-vue-component