How to propagate an error from vuex action to vue component?

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

palaѕн · Accepted Answer · 2020-05-11 09:32:52Z

3

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

},

edited May 11, 2020 at 9:32

answered May 11, 2020 at 9:27

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

2eety Over a year ago

I'm not really familiar with promises, but I thought that both then and catch return a promise. So that the thrown error would propagate.

Collectives™ on Stack Overflow

How to propagate an error from vuex action to vue component?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related