Aktivieren Sie den Modus im Nuxt 2 (vuejs) Store

Question

Ich muss die modale Komponente aus dem Vuex-Store aktivieren. Wenn die Ergebnis-API erfolgreich ist, verwende ich „this.$refs['modalSuccess'].show()“, um das Modal innerhalb der Komponente anzuzeigen!

Aber ich muss die Funktion „sendLeadResponse“ von Methode (Komponente) in Operation (Speicher) ändern. Danach kann ich das Modal nicht mehr mit diesem 'this.$refs['modalSuccess'].show()' aktivieren.

Gibt es eine Möglichkeit, es vom Laden aus anzurufen?

Das ist der Prozess:

1. Button: Methode innerhalb der Komponente aktivieren;
2. Methode: Aktion aus Store aktivieren;
3. Vorgang: Es wird eine externe API verwendet.
4. Modal: Wenn das Ergebnis normal ist, wird das Modal innerhalb der Komponente aktiviert;

Komponente mit Schaltfläche und Modal

<template>
    <Abschnitt>
    <div class="w-100 d-md-flex justify-content-md-end">
        <SmallButton
            smallButtonText="Suche nach dem Client →"
            @event="createLeadObject()"
            id="show-btn"
        />
    </div>
        <b-modal
            ref="modalSuccess"
            Nur OK
        > Obrigado pelo interesse!
        </b-modal>
    </div>
    </Abschnitt>
</template>

<script>
SmallButton aus '../SmallButton.vue' importieren
Standard exportieren {
    Name: 'BeClientForm',
    Komponenten: {
        Kleiner Knopf
    },
    Methoden: {
        createLeadObject(){
            const dataLeadObject = {
                Datum: neues Datum(),
                vollständiger Name: this.lead.name,
                E-Mail: this.lead.email,
                Telefon: this.lead.phone,
                Kommentar: this.lead.comment
            }
            this.$store.dispatch('sendLeadResponse', dataLeadObject)
        },
    }
}
</script>

商店的操作

aktionen: {
        asynchrones sendLeadResponse({commit}, dataLeadObject){
            const jsonDataObject = JSON.stringify(dataLeadObject)
            
           wait fetch("http://localhost:5000/api/lead/leadResponse", {
                Methode: "POST",
                Header: {"Content-type": "application/json"},
                Körper: jsonDataObject
            })
            .then((resp) => resp.json())
            .then((data) => {
                if (data.error) { 
                    commit('MESSAGE_RESPONSE', data.error)
                }
                anders {
                    commit('RESET_LEAD_RESPONSE')
                    !!!!!!!!!!!! this.$refs['modalSuccess'].show() !!!!!!!!!!!!!!! [es funktioniert nicht)
                }
            })
        },
    }

Answer 1

Vuex 商店被设计为只关心状态。它无法直接访问您的组件或 this.$refs。您可以做的是根据获取的结果在存储中设置一个状态，并让您的组件访问该状态，和/或从您的操作返回一个承诺，以便将结果直接传回您的组件

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