从 Nuxt 2 (vuejs) 商店激活模式

Question

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

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

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

这是以下流程：

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

带有按钮和模态框的组件

<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>
    </节>
</模板>

<脚本>
从 '../SmallButton.vue' 导入 SmallButton
导出默认值{
    名称： 'BeClientForm',
    成分： {
        小按钮
    },
    方法： {
        创建LeadObject(){
            const dataLeadObject = {
                日期：新日期（），
                全名：this.lead.name，
                电子邮件：this.lead.email,
                电话：this.lead.phone，
                评论：this.lead.comment
            }
            this.$store.dispatch('sendLeadResponse', dataLeadObject)
        },
    }
}
</脚本>

商店的操作

操作：{
        异步 sendLeadResponse({commit}, dataLeadObject){
            const jsonDataObject = JSON.stringify(dataLeadObject)
            
           等待获取（“http://localhost:5000/api/lead/leadResponse”，{
                方法：“POST”，
                headers: {"Content-type": "application/json"},
                主体：jsonDataObject
            })
            .then((resp) => resp.json())
            .then((数据) => {
                if (数据.错误) { 
                    提交（'MESSAGE_RESPONSE'，数据.错误）
                }
                别的 {
                    提交（'RESET_LEAD_RESPONSE'）
                    !!!!!!!!!!!! this.$refs['modalSuccess'].show() !!!!!!!!!!!!!!! [它不起作用）
                }
            })
        },
    }

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