<p>I need to activate modal component from vuex store. When the result API succeeds, I use 'this.$refs['modalSuccess'].show()' to show the modal inside the component! </p> <p>But I need to change the function "sendLeadResponse" from method (component) to operation (storage). After that I can no longer activate the modal using this 'this.$refs['modalSuccess'].show()' . </p> <p>Is there any way to call it from the store? </p> <p>This is the process:</p> <ol> <li>Button: Activate the method inside the component;</li> <li>Method: Activate action from store;</li> <li>Operation: It uses an external API; </li> <li>Modal: If the result is normal, it will activate the modal inside the component;</li> </ol> <p><strong>Component with button and modal</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>Store Operations</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>

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