Vuejs conditionally Redirect after post based on store data

Question

Hindsight 20:20 edit - this question was one that addresses the real underlying issue, which isn't apparent when encountering the problem below. Leaving this question/answer for posterity.

I have a VueJS front end with a Django REST API backend with several Endpoints.

User Flow that I can't get to work:

Users input numeric data via a form, and presses a button. Data is in local variable in BasePage.vue
Data service (AddNormal) is called which takes local variable and POSTs to correct API
Response data from API (including pass/fail) is set to Vuex Store via setter.
Based on store variable - page needs to redirect to pass or fail page.

How do I conditionally redirect to either a Pass page (with further actions) or a fail page based on this Vuex Store variable?

BasePage.vue

<script>
import { mapState, mapActions } from "vuex";
export default {
name: "basepage",
components: {
  ...stuff...
},
data() {
return {
  data: [],
 };
},
methods: {
...mapActions("results", ["addNormalResults", "addVPCResults"]),
getStats() {
  const payload = this.buildDataPayload;
 //this calls the store page to update the store with response data
  this.addNormalResults(payload).then(() => {
  // eslint-disable-next-line
  console.log('normal finished');
  const result = this.normalResults;
  console.log(result); //always is empty
  });
},
clearData() {
  this.data = [];
}
 },

  computed: {
...mapState("results", ["normalResults"]),
}

results.js store page

import statsEndpoints from '../../services/statsEndpoints'

const state = {
'normalResults': 'empty',
'vpcResults': 'empty',

}

const getters = {
normalResults: state => {
    return state.normalResults
},
vpcResults: state => {
    return state.vpcResults
}
}


const actions = {
addNormalResults({commit}, payload) {
    statsEndpoints.postNormality(payload)
        .then(response => {
            commit('addNormal', response)
        })
},
addVPCResults({
    commit
}, payload) {
    statsEndpoints.postVPC(payload)
        .then(response => {
            commit('addVPC', response)
        })
}
}

const mutations = {
addNormal(state, response) {
    state.normalResults = response
},
addVPC(state, response){
    state.vpcResults = response
}
}

export default {
namespaced: true,
state,
getters,
actions,
mutations
}

Possible duplicate of [Returning Promises from Vuex actions](https://stackoverflow.com/questions/40165766/returning-promises-from-vuex-actions) — Phil, Sep 24 '19 at 00:36

score 0 · Answer 1 · answered Sep 24 '19 at 00:21

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

}

score -1 · Answer 2 · answered Sep 23 '19 at 18:12

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

Vuejs conditionally Redirect after post based on store data

2 Answers2