Warum wird undefiniert angezeigt, wenn das Statusobjekt von Vuex 3.6 in einer Methode verwendet wird?

Question

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

Answer 1

和往常一样，结果是椅子和键盘之间的接口错误。通常从事件列表访问此页面，该列表是标识符为 EventID 的对象数组。当调用单独的事件时，标识符只是 ID，因此有效负载 2 中的代码应该读取

const payload2 = {
    ParticipantID: User.ParticipantID,
    EventID: ID // <- NOTE change of identifier.
  }

我想我会更新 API 以返回一致的标识符，避免以后出现麻烦。只浪费了大约3个小时......