1

I'll try to describe this as easy as possible

  1. "CompleteReservation" does a POST api call, and returns the ID from the newly saved object back, state "reservationId" is mutated with the new ID.
  2. A Redirect to "ReservationSummary" happens, and in the created event, it does a second API call which uses that ID as a parameter.. The problem is that the ID is always 0 (default value).

I know what the problem is, but i haven't found any solution to how to fix it yet : the store mutation is not finished, before created in "ReservationSummary" is called, makes it always 0.

FYI : I know that the value is sat (later on) through viewing Chrome VUE state..

How can i prevent this ?

CompleteReservation method (in 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 (in 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 (computed and created)

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

    }
}

GetReservationById action in store.js

getters.reservationId is 0 here (default value)

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

Chrome VUE state after ReservationSummary.vue is loaded

enter image description here

Terje Nygård
  • 1,233
  • 6
  • 25
  • 48
  • 1
    Easy fix, return the promise... `return api.completeReservation(newResObject)...` – Phil Jun 18 '18 at 00:03
  • Thanks for quick response @Phil :) I am quite "newbie" when it comes to promises and such, would you mind showing me by code please ? – Terje Nygård Jun 18 '18 at 00:06
  • 1
    I thought I did that? In your `completeReservation`, you should return the promise created by `api.completeReservation()`. That way, calls to `dispatch` can wait for the promise to resolve before navigating – Phil Jun 18 '18 at 00:07
  • Ah!.. Thanks to both of you which both led me in the direction of promises, and the link to the quite similar issue (duplicate).. I will close this one.. Thanks ! – Terje Nygård Jun 18 '18 at 00:08
  • I've already closed this as a duplicate – Phil Jun 18 '18 at 00:08
  • Thanks for help @Phil, and being understandable for my non-existing knowledge of Promises :) Guess i have to read-up a bit :) – Terje Nygård Jun 18 '18 at 00:09
  • 1
    See https://vuex.vuejs.org/guide/actions.html#composing-actions for more (official) information – Phil Jun 18 '18 at 00:10

0 Answers0