Vuejs условно перенаправить после публикации на основе данных магазина

Question

Оглядываясь назад 20:20 edit - этот вопрос был тем, который касается реальной основной проблемы, которая не очевидна при столкновении с проблемой ниже.Оставив этот вопрос / ответ для потомков.

У меня есть интерфейс VueJS с бэкэндом REST API Django с несколькими конечными точками.

Поток пользователей, который я не могу заставить работать:

1. Пользователи вводят числовые данные через форму и нажимают кнопку.Данные находятся в локальной переменной в BasePage.vue
2. Вызывается служба данных (AddNormal), которая принимает локальную переменную и POST для исправления API
3. Данные ответа от API (включая pass / fail) устанавливаются вХранилище Vuex через сеттер.
4. На основе переменной хранилища - страницу необходимо перенаправить на страницу пропуска или сбоя.

Как условно перенаправить на страницу пропуска (сдальнейшие действия) или страницу с ошибкой на основе этой переменной Vuex Store?

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
}

Answer 1

Разобрался и ответил на мой собственный вопрос для потомков:

Реальная проблема - асинхронные действия для vuex.Его асинхронное завершение действия «addNormalResults» в то время, когда происходит фиксация, поскольку Обещание statsEndpoints.postNormality не возвращалось функции внутри моего компонента Vue.

Если возвращается Обещаниев действии можно использовать .then( ()=> {do stuff}, чтобы выполнить Обещание, а затем выполнить do stuff.

Изменение на results.js store page:

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

}

Answer 2

вы можете вызывать действие в вашем магазине, когда оно успешно, его значение установлено в true, а при возникновении ошибки его значение устанавливается в false, а затем вызывать геттер внутри вашего компонента, где вы вызываете свою функцию, и использовать этот геттер дляперенаправить пользователя вот так

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