Is way i can react to an asynchronous action in vuex in a vue template

Question

I want to display a loading effect in a vue template whilst an asynchronous action in vuex is still running. But the loading effect doesn't seem to work. How do I fix it?. Is there any better way I can achieve this?

This is how I defined the action:

actions: {
  signIn({ state }, user) {
    auth()
      .signInWithEmailAndPassword(userInfo.email, userInfo.password)
      .then(result => {
        return result
      })
  },
},

This how defined the dispatch in vue template method:

let loader = this.$loader.show()
this.$store.dispatch('signIn', this.user).then(() => {
  loader.hide()
})

I expected the loader to start when the action begins and end when the action ends but it starts and ends almost instantly.

Answer 1

Just add return statement, that returns a Promise so you can then it in your component.

actions: {
  signIn({ state }, user) {
    return auth()
      .signInWithEmailAndPassword(userInfo.email, userInfo.password)
      .then(result => {
        return result
      })
  },
},