Question

我试着尽可能简单地描述这个

＆＃34; CompleteReservation＆＃34;进行POST api调用，然后返回新保存对象的ID，状态＆＃34; reservationId＆＃34;使用新ID进行变异。
重定向到＆＃34; ReservationSummary＆＃34;发生了，并且在创建的事件中，它执行第二次API调用，该调用使用该ID作为参数。问题是ID始终为0（默认值）。

我知道问题是什么，但我还没有找到任何解决办法来解决这个问题：在＆＃34; ReservationSummary＆＃34;中创建之前，商店突变尚未完成。被调用，使它始终为0.

仅供参考：我知道通过查看Chrome VUE状态可以保持价值（稍后）

我该如何防止这种情况？

CompleteReservation方法（在Reservation.vue中）

 CompleteReservation: function() {
            let newResObject = {
                ResConfigId: this.id,
                Name: this.reqName,
                NrOfPersons: this.reqNrOfPersons,
                Phone: this.reqPhone,
                Email: this.reqEmail,
                Address: this.reqAddress,
                // ResDate: Utils.ConvertToStringDate(this.selectedDate),
                ResDate: Utils.ConvertToUtc(this.selectedDate),
                ResTime: this.availableSeats.ReservationStartHour,
            }
            this.$store.dispatch('completeReservation', newResObject).then( o => {
                this.$router.push('/reservationsummary/')})

CompleteReservation action / mutation / getter / state（在store.js中）

completeReservation({ commit }, newResObject) {
        api.completeReservation(newResObject)
            .then(reservationId => {
                console.log("Reservasjonen er fullført..")
                commit("UPDATE_RESERVATION_ID", reservationId)
            })
    }

// mutation
UPDATE_RESERVATION_ID(state, reservationId) { state.reservationId = reservationId },

// getter
reservationId: state => state.reservationId,

// state
reservationId: 0,

ReservationSummary.vue（计算和创建）

export default {
computed: {
    completedReservation() {
        return this.$store.getters.completedReservation
        }
    },
    created() {
        console.log("Inside created...")
        this.$store.dispatch('getReservationById')
    },
    methods: {

    }
}

GetReservationById操作

此处getters.reservationId为0（默认值）

getReservationById({ commit, getters }) {
        api.getReservationById(getters.reservationId)
            .then(completedReservation => {
                console.log("Getting completed reservation")
                commit("UPDATE_COMPLETED_RESERVATION", completedReservation)
            })
    },

加载ReservationSummary.vue后的Chrome VUE状态

vue.js：在第二次api调用运行之前，变量状态变量未完成，需要值

0 个答案: