Activer le mode depuis la boutique Nuxt 2 (vuejs)
P粉693126115
2023-09-02 21:26:44
<p>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 ! </p>
<p>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()' . </p>
<p>Y a-t-il un moyen de l'appeler depuis le magasin ? </p>
<p>Voici le processus :</p>
<ol>
<li>Bouton : activez la méthode à l'intérieur du composant ;</li>
<li>Méthode : activer l'action depuis le magasin ;</li>
<li>Fonctionnement : il utilise une API externe ;</li>
<li>Modal : Si le résultat est normal, cela activera le modal à l'intérieur du composant ;</li>
</ol>
<p><strong>Composant avec bouton et modal</strong></p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p><strong>商店的操作</strong></p>
<pre class="brush:php;toolbar:false;">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)
}
})
},
}</pre></p>
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