Aktifkan mod dari kedai Nuxt 2 (vuejs).

Question

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:

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

Komponen dengan butang dan modal

<template>
    <bahagian>
    <kelas div="w-100 d-md-flex justify-content-md-end">
        <Butang Kecil
            smallButtonText="Quero ser cliente →"
            @event="createLeadObject()"
            id="tunjukkan-btn"
        />
    </div>
        <b-modal
            ref="modalSuccess"
            OK sahaja
        > Obrigado pelo interestse!
        </b-modal>
    </div>
    </section>
</template>

<skrip>
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)
        },
    }
}
</script>

商店的操作

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

Answer 1

Kedai Vuex direka untuk hanya mementingkan keadaan. Ia tidak mempunyai akses langsung kepada komponen anda atau this.$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

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