Aktifkan mod dari kedai Nuxt 2 (vuejs).-Soal Jawab Rangkaian PHP Cina

Saya perlu mengaktifkan komponen modal daripada kedai vuex. Apabila API hasil berjaya, saya menggunakan 'this.$refs['modalSuccess'].show()' untuk menunjukkan modal di dalam komponen!

Tetapi saya perlu menukar fungsi "sendLeadResponse" daripada kaedah (komponen) kepada operasi (storan). Selepas itu saya tidak boleh lagi mengaktifkan modal menggunakan 'this.$refs['modalSuccess'].show()' ini.

Adakah terdapat cara untuk memanggilnya dari kedai?

Ini ialah prosesnya:

Butang: Aktifkan kaedah di dalam komponen;
Kaedah: Aktifkan tindakan daripada kedai;
Operasi: Ia menggunakan API luaran
Modal: Jika hasilnya normal, ia akan mengaktifkan modal di dalam komponen

Komponen dengan butang dan modal

  import SmallButton daripada '../SmallButton.vue' eksport lalai { nama: 'BeClientForm', komponen: { Butang Kecil }, kaedah: { createLeadObject(){ const dataLeadObject = { tarikh: new Date(), Nama penuh: this.lead.name, e-mel: this.lead.email, telefon: this.lead.phone, komen: this.lead.comment } this.$store.dispatch('sendLeadResponse', dataLeadObject) }, } }

商店的操作

tindakan: { async sendLeadResponse({commit}, dataLeadObject){ const jsonDataObject = JSON.stringify(dataLeadObject) tunggu ambil("http://localhost:5000/api/lead/leadResponse", { kaedah: "POST", pengepala: {"Content-type": "application/json"}, badan: jsonDataObject }) .then((resp) => resp.json()) .then((data) => { jika (data.error) { commit('MESSAGE_RESPONSE', data.error) } lain { commit('RESET_LEAD_RESPONSE') !!!!!!!!!!! ini.$refs['modalSuccess'].tunjukkan() !!!!!!!!!!!!!! [is tidak berfungsi) } }) }, }

async sendLeadResponse({ commit }, dataLeadObject) { const jsonDataObject = JSON.stringify(dataLeadObject); // assign promise from fetch const response = await fetch('http://localhost:5000/api/lead/leadResponse', { method: 'POST', headers: { 'Content-type': 'application/json' }, body: jsonDataObject }) .then(resp => resp.json()) .then(data => { if (data.error) { commit('MESSAGE_RESPONSE', data.error); // promise to resolve to false return false; } else { commit('RESET_LEAD_RESPONSE'); // promise to resolve to true return true; } }); // return promise return response },

// change to async async createLeadObject() { const dataLeadObject = { date: new Date(), fullName: this.lead.name, email: this.lead.email, phone: this.lead.phone, comment: this.lead.comment }; const response = await this.$store.dispatch('sendLeadResponse', dataLeadObject); // if response is 'true', show modal if (response) { this.$refs['modalSuccess'].show(); } }

membalas semua (1)

P粉3767388752023-09-03 19:19:10 Tingkat 1

Kedai Vuex direka untuk hanya mementingkan keadaan. Ia tidak mempunyai akses langsung kepada komponen anda atauthis.$refs. Perkara yang boleh anda lakukan ialah tetapkan keadaan dalam storan berdasarkan hasil yang anda perolehi dan pastikan komponen anda mengakses keadaan itu dan/atau mengembalikan janji daripada tindakan anda untuk menghantar hasilnya terus kepada komponen anda