如何将错误从 vuex 操作传播到 vue 组件？

Question

I have a no module store and I have an action loginUser , which logins the user by saving the authorization header in the state:

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

The problem is that I need the error in the login component and I can't store it in the state, since I made the store to be persistent as long as the session is active. My submit function in the login component looks like this:

  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())
      }
    },

This just throws an Uncaught (in promise) .

Answer 1

You can return a Promise from your loginUser action like:

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)
      })
  })
}

and then you can update your async onSubmit() method and catch that error using try..catch like:

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)
  }

},