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 {
  puted: {
    ...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.

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 {
  puted: {
    ...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.

• javascript
• vuejs2
• bootstrap-4
• vuex
• bootstrap-vue

• Due to JavaScript's async nature, you won't really be able to "wait" until the modal is closed; you would have to either implements callbacks or some Promise. If you're using modern JS, you may try using await, though, behind the scenes, that will use a Promise. – Haroldo_OK Commented Feb 5, 2019 at 11:37
• Yes, I know. This is the reason you can find async/await in my code. I will clarify it. Thanks. – TitanFighter Commented Feb 5, 2019 at 11:41
• I see... I can't write the sample code right now, but to use a Promise, you would need to wrap the capture of the click events of the OK/CANCEL buttons inside a Promise, and the click events themselves would need to call the resolve function. – Haroldo_OK Commented Feb 5, 2019 at 12:32
• This is similar to what I'm talking about, though instead of capturing events from some emitter, you would capture events from the buttons: stackoverflow./a/29933215/679240 – Haroldo_OK Commented Feb 5, 2019 at 12:38

3 Answers 3

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 ponent. Here is an example: https://jsfiddle/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;
},

Found the way how to implement it via v2 thanks to this post.

gleam's answer is shorter and cleaner, so you should prefer his solution. My solution below is posted just for educational purpose.

state.js

modalTextSummary = {}
doSave = false

action.js

// My 'store' file is at the root. Where is yours - I do not know :)
import store from '@/store'

async myAction ({ state }) {
  state.doSave = false

  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. Wait until user closes modal or clicks OK
  const unwatch = store.watch(
    (state) => state.doSave,
    (value) => {

      // #5. Apply changes
      if (value === true) {
        unwatch()
        // ... code which handles data from data[1-5]

      } else if (value === 'unwatch') {
        unwatch()
      }
    }
  )
}

Why do we need to unwatch()?

In my case myAction is called by "someButton" (example name) and as a result opens modal. If we open/close modal 5 times wihout clicking on OK button, we will watch state.doSave also 5 times and when after the 6th opening the OK button is clicked, data[1-5] will be processed 6 times. So, if modal is closed without clicking OK button, we need to unwatch state.doSave.

myModalComponent.js

<template>
  <b-modal
    ref="myModal"
    ok-title="OK"
    cancel-title="Close"
    @keydown.native.enter="closeModalAndSave"
    @ok="closeModalAndSave"
    @hide="closeModalAndUnwatch"
  >
    {{ modalTextSummary }}
  </b-modal>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

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

  watch: {
    modalTextSummary: function () {
      if (this.modalTextSummary !== {}) {
        this.$refs.myModal.show()
      }
    }
  },

  methods: {
    ...mapMutations('media', [
      'doSave'
    ]),

    closeModalAndUnwatch (bvEvent) {
      // "this.$refs.myModal.hide()" fires @hide with "bvEvent.trigger === null".
      // We need to 'unwatch' just when bvEvent.trigger === 'cancel' or 'backdrop',
      // or 'header-close', ie not null.
      if (bvEvent.trigger !== null) {
        this.doSave('unwatch')
      }
    },

    closeModalAndSave () {
      this.doSave(true)
      this.$refs.myModal.hide()
    }
  } // End of "methods"
}
</script>

If you are using bsModal you have to write separate function bindings for both buttons,until user click out either button or click outside the modal it will keep open.so put the remainder of the function inside those close or confirm buttons click events

<button (click)="confirm()"></button>
<button (click)="Cancel()"></button>
import { BsModalRef} from 'ngx-bootstrap';
constructor(){public modalRef: BsModalRef}

confirm(){
//do anything 
this.modalRef.close();
}

Cancel(){
//do anything
this.modalRef.close();
}