Mengapa undefined muncul apabila menggunakan objek keadaan vuex 3.6 dalam kaedah?

Question

Saya sedang membina aplikasi menggunakan vue 2.6.11 dan vuex 3.6.0

Halaman yang saya bina adalah untuk pendaftaran acara. Dapatkan ActiveEvent (ID acara, tarikh, lokasi, dll.) daripada pangkalan data menggunakan API

Borang pendaftaran terlebih dahulu meminta alamat e-mel. Selepas medan e-mel dikaburkan, kami mencetuskan checkEmail(). Ini sepatutnya melakukan satu atau dua panggilan API. Panggilan pertama menyemak sama ada terdapat alamat e-mel dalam pangkalan data dan mengembalikan ID Peserta, jika ya maka panggilan kedua dibuat untuk melihat sama ada peserta telah menggunakan Event.EventID dan ActiveUser.ParticipantID < /p>

Struktur halaman yang sedang dimuatkan ialah komponen halaman <EventDetail> dipanggil daripada penghala. Ia mempunyai komponen utama <EventRegistration> yang memanggil dua sub-komponen berasingan: <EventRegistrationBlurb> yang mendapat status. ActiveEvent diluluskan sebagai prop, <EventRegistrationForm> ialah untuk mendapatkan state.ActiveEvent secara langsung. Komponen luaran <EventRegistration> bertanggungjawab untuk mendapatkan data Acara daripada API dan keadaan tetapan.ActiveEvent, berjaya dilaksanakan,

Apa yang saya tidak faham ialah mengapa apabila saya memanggil checkEmail dalam komponen, ini.ActiveEvent tidak ditentukan. Semasa komponen blurb memaparkannya dengan betul, komponen puter mendapat API dan menetapkan keadaan dengan betul. Jika saya meletakkan objek ActiveEvent ke dalam templat EventRegistrationForm, ia dipaparkan dengan betul, ia tidak dapat ditetapkan dalam masa untuk mengikat dengan kaedah checkEmail()

Saya mempunyai kod berikut dalam komponen anak saya <EventRegistrationForm>: (perhatikan bahawa ActiveEvent ditetapkan oleh komponen luaran dan ditetapkan dengan betul)

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

Kemudian di kedai saya:

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

Seperti biasa, hasilnya adalah antara muka yang rosak antara kerusi dan papan kekunci. Halaman ini biasanya diakses daripada senarai acara, yang merupakan tatasusunan objek dengan ID Acara pengecam. Apabila memanggil acara berasingan, pengecam hanyalah ID, jadi kod dalam muatan 2 harus dibaca

const payload2 = {
    ParticipantID: User.ParticipantID,
    EventID: ID // 
Saya rasa saya akan mengemas kini API untuk mengembalikan pengecam yang konsisten untuk mengelakkan masalah pada masa hadapan. Hanya membazir lebih kurang 3 jam...