从 Nuxt 2 (vuejs) 商店激活模式
P粉693126115
P粉693126115 2023-09-02 21:26:44
[Vue.js讨论组]
<p>我需要从 vuex 商店激活模式组件。当结果 API 成功时,我使用 'this.$refs['modalSuccess'].show()' 显示组件内的模式!</p> <p>但我需要将函数“sendLeadResponse”从方法(组件)更改为操作(存储)。之后,我无法再使用此 'this.$refs['modalSuccess'].show()' 激活模式。</p> <p>有什么方法可以从商店调用它吗?</p> <p>这是以下流程:</p> <ol> <li>按钮:激活组件内部的方法;</li> <li>方法:从商店激活操作;</li> <li>操作:它使用外部 API;</li> <li>模态:如果结果正常,它将激活组件内部的模态;</li> </ol> <p><strong>带有按钮和模态框的组件</strong></p> <pre class="brush:php;toolbar:false;">&lt;template&gt; &lt;section&gt; &lt;div class=&quot;w-100 d-md-flex justify-content-md-end&quot;&gt; &lt;SmallButton smallButtonText=&quot;Quero ser cliente →&quot; @event=&quot;createLeadObject()&quot; id=&quot;show-btn&quot; /&gt; &lt;/div&gt; &lt;b-modal ref=&quot;modalSuccess&quot; ok-only &gt; Obrigado pelo interesse! Em breve entraremos em contato. &lt;/b-modal&gt; &lt;/div&gt; &lt;/section&gt; &lt;/template&gt; &lt;script&gt; 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) }, } } &lt;/script&gt;</pre> <p><strong>商店的操作</strong></p> <pre class="brush:php;toolbar:false;">actions: { async sendLeadResponse({commit}, dataLeadObject){ const jsonDataObject = JSON.stringify(dataLeadObject) await fetch(&quot;http://localhost:5000/api/lead/leadResponse&quot;, { method: &quot;POST&quot;, headers: {&quot;Content-type&quot;: &quot;application/json&quot;}, body: jsonDataObject }) .then((resp) =&gt; resp.json()) .then((data) =&gt; { if (data.error) { commit('MESSAGE_RESPONSE', data.error) } else { commit('RESET_LEAD_RESPONSE') !!!!!!!!!!!!! this.$refs['modalSuccess'].show() !!!!!!!!!!!!!! [it is not working) } }) }, }</pre></p>
P粉693126115
P粉693126115

全部回复(1)
P粉376738875

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();
  }
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号