How to wait until modal is closed and continue execution based on either OK or CANCEL was clicked?

Question

Algorithm:

1. I find the difference between two arrays of objects (what is new, what is deleted, renamed, etc). Differences are stored in data[1-5]
2. Based on #1 I prepare a text summary (objects of text) for a modal to notify user what difference has been found. This summary is stored in someDataToShowInModal.
3. When the difference is found the modal with the summary must be shown to a user. User should accept (click OK) or decline (click CANCEL) to apply changes.

4. QUESTION: How to wait until user clicks modal's OK or CANCEL button?

   In the code I show two possible solutions, but do not know how to implement them:

   1. Wrap modal into Promise.

   2. Use state.doSave and somehow wait until it is changed by myModalComponent.

5. Apply changes if user clicks OK.

Below is pseudo-code which shows the logic I try to implement:

state.js

modalTextSummary = {}

action.js

async myAction ({ state }) {
  let modalClosed
  let someDataToShowInModal = {}

  let data1 = []
  let data2 = []
  let data3 = []
  let data4 = []
  let data5 = []

  // #1. Push difference to "data[1-5]"
  data1.push(xyz1)
  data2.push(xyz2)
  data3.push(xyz3)
  data4.push(xyz4)
  data5.push(xyz5)

  // #2. Based on data[1-5] prepare "someDataToShowInModal"
  someDataToShowInModal = {xyz}

  // #3. We change "state.modalTextSummary" and by this we open
  // a Modal (because "myModalCompont" has "watch: {modalTextSummary}")
  state.modalTextSummary = someDataToShowInModal

  // #4. HOW TO WAIT UNTIL USER CLICKS Modal's "OK" or "CANCEL"?

  // v1:
  // something like...
  modalClosed = await myModalComponent

  // v2:
  // I can add "state.doSave = ''" which can be
  // set by "myModalComponent" to either 'OK' or 'CANCEL', but how
  // in this case I can wait for state changes?
  modalClosed = await state.doSave !== ''

  // #5. Apply changes
  if (modalCloses === 'OK') {
    // ... code which handles data from data[1-5]
  }
}

myModalComponent.js

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'modalTextSummary'
    ])
  },

  watch: {
    modalTextSummary: function () {
      if (this.modalTextSummary !== {}) {
        // Here I show bootstrap-vue modal
      }
    }
  }
}
</script>

I know how to call a function once a modal is closed by OK button, but in this case it is necessary to temporary save data[1-5] in vuex in order to pick them again inside a called function and I want to avoid it using a simpler approach.

Answer 1

I want to offer you to make some refactor :)

1) Store`s actions SHOULD NOT know about interface (server-side-rendering issues, ...) - bad practice.

2) It is better to store modal's data in modal's parent component. Here is an example: https://jsfiddle.net/yyx990803/70yyx8z2/

Then you'll be able to do something like this (pseudocode):

<my-modal
    v-if="showModal"
    @cancel="processModalCancel"
    @submit="processModalSubmit"
    >
    <!-- mutating-manipulations with modalData -->
</my-modal>

---

openModal() {
    this.showModal = true;
    this.modalData = store.dispatch('prepareDataToShowInModal'); // myAction, first part
},
processModalCancel() {
    this.showModal = false;
    this.modalData = null;
},
processModalSubmit() {
    this.showModal = false;
    store.dispatch('saveModalData', this.modalData); // myAction, second part
    this.modalData = null;
},