從 Nuxt 2 (vuejs) 商店啟動模式
P粉693126115
2023-09-02 21:26:44
<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;"><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></pre>
<p><strong>商店的操作</strong></p>
<pre class="brush:php;toolbar:false;">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)
}
})
},
}</pre></p>
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(); } }