Mengapa undefined muncul apabila menggunakan objek keadaan vuex 3.6 dalam kaedah?
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)
}
}
}