从 Nuxt 2 (vuejs) 商店激活模式-PHP中文网问答

我需要从 vuex 商店激活模式组件。当结果 API 成功时，我使用 'this.$refs['modalSuccess'].show()' 显示组件内的模式！

但我需要将函数“sendLeadResponse”从方法（组件）更改为操作（存储）。之后，我无法再使用此 'this.$refs['modalSuccess'].show()' 激活模式。

有什么方法可以从商店调用它吗？

这是以下流程：

按钮：激活组件内部的方法；
方法：从商店激活操作；
操作：它使用外部 API；
模态：如果结果正常，它将激活组件内部的模态；

带有按钮和模态框的组件

<template>
    <section>
    <div class="w-100 d-md-flex justify-content-md-end">
        <SmallButton 
            smallButtonText="Quero ser cliente →"
            @event="createLeadObject()"
            id="show-btn"
        />
    </div>
        <b-modal 
            ref="modalSuccess" 
            ok-only
        > Obrigado pelo interesse! Em breve entraremos em contato. 
        </b-modal>
    </div>
    </section>
</template>

<script>
import SmallButton from '../SmallButton.vue'
export default {
    name: 'BeClientForm',
    components: {
        SmallButton
    },
    methods: {
        createLeadObject(){
            const dataLeadObject = {
                date: new Date(),
                fullName: this.lead.name,
                email: this.lead.email,
                phone: this.lead.phone,
                comment: this.lead.comment
            }
            this.$store.dispatch('sendLeadResponse', dataLeadObject)
        },
    }
}
</script>

商店的操作

actions: {
        async sendLeadResponse({commit}, dataLeadObject){
            const jsonDataObject = JSON.stringify(dataLeadObject)
            
           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)
                }
                else {
                    commit('RESET_LEAD_RESPONSE')
                    !!!!!!!!!!!!! this.$refs['modalSuccess'].show() !!!!!!!!!!!!!! [it is not working)
                }
            })
        },
    }

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