CODEWITHSUNDEEP
vue.jsvuejs2es6-promisevue-routervuex
Dani Vijay
Dani Vijay

Reputation: 2258

Triggering a route only after dispatch and commit completed in VueJS

I do have a form submit which takes email and password then pass them into an action in store called userSignIn

SignIn.vue :

onSubmit () {
    if (this.$refs.form.validate()) {
    const user = {
        email: this.email,
        password: this.password
    }
    this.$store.dispatch('userSignIn', user)
        .then(() => {
            this.$router.push('/')
        }).catch(err => {
            console.log(err)
        })
    }
}

Within store, I do have a userSignIn action like this

store.js actions:

userSignIn ({commit, getters}, payload) {
    getters.Api.post(`user/signin`, {
        email: payload.email,
        password: payload.password
    }).then(res => {
        commit('userSignIn', res.data.token)
    }).catch(err => {
        console.log(err)
    })
}

The routing(this.$router.push('/')) should only be done after userSignIn commit(commit('userSignIn', res.data.token)). But what actually happening routing triggers before commit, which results and error because user token is not set yet.

How to trigger something(in this case this.$router.push('/')) only after completion of dispatch and commit within it?

Upvotes: 3

Views: 1171

Answers (1)

Dani Vijay
Dani Vijay

Reputation: 2258

Returning the promise did the trick.

userSignIn ({commit, getters}, payload) {
    return getters.Api.post(`user/signin`, {
        ......
    })

Upvotes: 3

Related Questions