Activer le mode depuis la boutique Nuxt 2 (vuejs)

Question

Je dois activer le composant modal depuis le magasin vuex. Lorsque l'API de résultat réussit, j'utilise 'this.$refs['modalSuccess'].show()' pour afficher le modal à l'intérieur du composant !

Mais je dois changer la fonction "sendLeadResponse" de méthode (composant) à opération (stockage). Après cela, je ne peux plus activer le modal en utilisant ce 'this.$refs['modalSuccess'].show()' .

Y a-t-il un moyen de l'appeler depuis le magasin ?

Voici le processus :

1. Bouton : activez la méthode à l'intérieur du composant ;
2. Méthode : activer l'action depuis le magasin ;
3. Fonctionnement : il utilise une API externe ;
4. Modal : Si le résultat est normal, cela activera le modal à l'intérieur du composant ;

Composant avec bouton et modal

<template>
    <section>
    <div class="w-100 d-md-flex justifier-content-md-end">
        <PetitBouton
            smallButtonText="Quel client →"
            @event="createLeadObject()"
            id="show-btn"
        />
    </div>
        <b-modal
            ref="modalSuccès"
            OK-seulement
        > Obrigado pelo interesse ! Em breve entreremos em contato.
        </b-modal>
    </div>
    </section>
</modèle>

<script>
importer SmallButton depuis '../SmallButton.vue'
exporter par défaut {
    nom : 'BeClientForm',
    Composants: {
        PetitBouton
    },
    méthodes : {
        créerLeadObject(){
            const dataLeadObject = {
                date : nouvelle Date(),
                nom complet : ce.lead.name,
                email : this.lead.email,
                téléphone : ce.lead.phone,
                commentaire : this.lead.comment
            }
            this.$store.dispatch('sendLeadResponse', dataLeadObject)
        },
    }
}
</script>

商店的操作

actions : {
        async sendLeadResponse({commit}, dataLeadObject){
            const jsonDataObject = JSON.stringify(dataLeadObject)
            
           wait fetch("http://localhost:5000/api/lead/leadResponse", {
                méthode : "POST",
                en-têtes : {"Content-type": "application/json"},
                corps : jsonDataObject
            })
            .then((resp) => resp.json())
            .then((données) => {
                si (données.erreur) { 
                    commit('MESSAGE_RESPONSE', données.erreur)
                }
                autre {
                    commit('RESET_LEAD_RESPONSE')
                    !!!!!!!!!!!!! this.$refs['modalSuccess'].show() !!!!!!!!!!!!! [ça ne marche pas)
                }
            })
        },
    }

Answer 1

Les magasins Vuex sont conçus pour se soucier uniquement de l'état. Il n'a pas d'accès direct à vos composants ou this.$refs. Ce que vous pouvez faire est de définir un état dans le stockage en fonction du résultat que vous obtenez et de permettre à votre composant d'accéder à cet état, et/ou de renvoyer une promesse de votre action pour transmettre le résultat directement à votre composant

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