How to resolve a Promise object in a vuex action and redirect to another route?

Get Help
#1

This is Component File is…

          ` import CommonForm from '../common/Form.vue'`
                     export default
                     {
                           data() {
                                return {

                          }
                     },

                 components:{
                         CommonForm:CommonForm
                 },

             computed:{
                 ...mapGetters({
                 formData:'getFormObj',
                 unauthorised:'getUnauthorisedState'
             })
           },


            methods:{

                submitLogin() {
                     this.loginForm(this.formData);
                },

              ...mapActions({
                   loginForm: 'loginForm'
              })
           }

         }

the action which commits the mutation is.

export const loginForm = ({commit},data) => {
    return new Promise((resolve, reject) => {
        axios.post('http://localhost:8000/api/login',data).then((response) => {
            console.log(response);
            commit('logUserIn',response.data.data);
            resolve();
            this.$router.go('home')
        }).catch((error) => {
            commit('unAuthorisedUser',{
                error:error.response.data
            })
        })
    });

};

The error in chrome console is.

error

#2

Please post the actual code and use proper syntax highlighting as explained in the sticky post of the “get Help” section.

I won’t manually type down your code from a screenshot.

1 Like
#3

I guess it is more readable now. If you could answer it, i would be obliged.

#4

The error seems unrelated to your question, it seems there is some problem with response.data.data, but I can’t tell without seeing it running.

To answer the original question: you should not do that in the action, the store is about state, not routing. Do that in the component:

submitLogin() {
  this.loginForm(this.formData).then(() => {
    this.$router.push({name: 'home'})  // unless ou use vue-router. 0.7, the method you want is "push", not "go"
    // or: this.$router.push('home') 
   // not sure if 'home' was supposed to be a name or a path.
  });
},

Also, you don’t have to create a promise, axios returns one itself:

export const loginForm = ({commit},data) => {
        return axios.post('http://localhost:8000/api/login',data).then((response) => {
            console.log(response);
            commit('logUserIn',response.data.data);
        }).catch((error) => {
            commit('unAuthorisedUser',{
                error:error.response.data
            })
        })
};
2 Likes
#5

Yes, I got it working thank you for the response.