<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
。您可以做的是根据获取的结果在存储中设置一个状态,并让您的组件访问该状态,和/或从您的操作返回一个承诺,以便将结果直接传回您的组件