Ich erstelle die Anwendung mit Vue 2.6.11 und Vuex 3.6.0

Die Seite, die ich erstelle, dient der Registrierung von Veranstaltungen. Rufen Sie ActiveEvent (Ereignis-ID, Datum, Ort usw.) mithilfe der API aus der Datenbank ab

Im Anmeldeformular wird zunächst nach einer E-Mail-Adresse gefragt. Nachdem das E-Mail-Feld unscharf ist, lösen wir checkEmail() aus. Dies sollte einen oder zwei API-Aufrufe ausführen. Der erste Aufruf prüft, ob eine E-Mail-Adresse in der Datenbank vorhanden ist und gibt die ParticipantID zurück. Wenn ja, erfolgt der zweite Aufruf, um zu sehen, ob der Teilnehmer Event.EventID und ActiveUser.ParticipantID < /p> verwendet hat

Die Struktur der Seite, die geladen wird, ist die Seitenkomponente <EventDetail>, die vom Router aufgerufen wird. Es verfügt über eine Hauptkomponente <EventRegistration>, die zwei separate Unterkomponenten aufruft: <EventRegistrationBlurb>, die den Status abruft. ActiveEvent wird als Requisite übergeben, <EventRegistrationForm> soll state.ActiveEvent direkt abrufen. Die externe Komponente <EventRegistration> ist dafür verantwortlich, Ereignisdaten von der API abzurufen und state.ActiveEvent festzulegen, erfolgreich ausgeführt,

Was ich nicht verstehen kann, ist, warum this.ActiveEvent undefiniert ist, wenn ich checkEmail in der Komponente aufrufe. Während die Blurb-Komponente es korrekt rendert, ruft die Computerkomponente die API ab und legt den Status korrekt fest. Wenn ich das ActiveEvent-Objekt in die Vorlage der EventRegistrationForm einfüge, wird es korrekt gerendert, es wird nur nicht rechtzeitig für die Bindung mit der Methode checkEmail() festgelegt

Ich habe den folgenden Code in meiner untergeordneten Komponente <EventRegistrationForm>: (Beachten Sie, dass das ActiveEvent von der externen Komponente festgelegt und korrekt festgelegt wird)

methods: {
    ...mapActions(['CheckParticipantByEmail']),
    async checkEmail () {
      const payload = {
        email: this.form.email,
        EventID: this.ActiveEvent.EventID  // <-- THIS IS UNDEFINED???
    }
    await this.CheckParticipantByEmail(payload)
  }
},
computed: {
  ...mapState(['ActiveEvent', 'ActiveUser'])
}

Dann in meinem Laden:

state: {
  ActiveEvent: {},
  ActiveUser: {}
},
mutations: {
  SET_ACTIVE_EVENT (state, payload) {
    state.ActiveEvent = payload
  },
  CHECK_PARTICIPANT_BY_EMAIL (state, payload) {
    state.ActiveUser = payload
  },
  GET_PARTICIPANT_FOR_EVENT (state, payload) {
    state.ActiveUser = payload
  }
},
actions: {
  async CheckParticipantByEmail ({ commit }, payload) {
    console.log('payload', payload)
    const baseUrl = process.env.VUE_APP_API_URL
    const url = `${baseUrl}getParticipantbyEmail`
    const { email, EventID } = payload
    const response = await axios.post(
      url,
      {
        EmailAddress: email
      }
    )
    const User = await response.data[0]
    commit('CHECK_PARTICIPANT_BY_EMAIL', User)
    if (User.ParticipantID > 0) {
      const baseUrl = process.env.VUE_APP_API_URL
      const url2 = `${baseUrl}getParticipantForEvent`
      const payload2 = {
        ParticipantID: User.ParticipantID,
        EventID: EventID
      }
      alert('URL2: ' + url2)
      alert('payload2 participant: ' + payload2.ParticipantID)
      alert('payload2 event: ' + payload2.EventID)
      const response2 = await axios.post(
        url2,
        payload2
      )
      // console.log('response: ', response.data[0])
      const payload3 = response2.data[0]
      commit('GET_PARTICIPANT_FOR_EVENT', payload3)
    }
  }
}