[Vuejs]-Vuejs conditionally Redirect after post based on store data

0đź‘Ť

Figured it out and answering my own question for posterity:

The real issue is asynchronous actions for the vuex. Its asynchronously finishing the “addNormalResults” action while the commit is happening because the Promise of the statsEndpoints.postNormality was not being returned to the function inside my Vue component.

If the Promise is returned in the action, one can use .then( ()=> {do stuff} to resolve the Promise and then do the do stuff.

The change to results.js store page:

const actions = {
    addNormalResults({commit}, payload) {
    return statsEndpoints.postNormality(payload) //notice the return
        .then(response => {
            commit('addNormal', response)
        })
    }

}

-1đź‘Ť

you can call a action in your store when it is success it’s value is set to true and when there is error it’s value set to false and then call a getter inside your component where you are calling you function and use that getter to redirect the user like this

if(sucess){
      this.$router.replace({
                path:'to success path',query:{
                  id:your query 'optional'
           }
        })
}else{
this.$router.replace({
                path:'to error path',query:{
                  id:your query 'optional'
           }
        })
}

Leave a comment