從 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>
    </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)
                }
            })
        },
    }

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