如何等到模态关闭并根据单击确定或取消继续执行？

Question

算法：

1. 我发现了两个对象数组之间的区别（什么是新的，什么是删除的，什么是重命名的，等等）。差异存储在data[1-5]
2. 基于#1，我为模态准备了一个文本摘要（文本对象），以通知用户发现了什么差异。此摘要存储在someDataToShowInModal.
3. 当发现差异时，必须向用户显示带有摘要的模式。用户应接受（单击确定）或拒绝（单击取消）以应用更改。

4. 问题：如何等到用户点击模态的 OK 或 CANCEL 按钮？

   在代码中我展示了两种可能的解决方案，但不知道如何实现它们：

   1. 将模态包装到 Promise 中。

   2. 使用state.doSave并以某种方式等到它被更改myModalComponent。

5. 如果用户单击“确定”，则应用更改。

下面是伪代码，显示了我尝试实现的逻辑：

状态.js

modalTextSummary = {}

动作.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>

我知道如何在通过 OK 按钮关闭模态后调用函数，但在这种情况下，有必要在 vuex 中临时保存数据 [1-5] 以便在被调用的函数中再次选择它们，我想避免它使用更简单的方法。

Answer 1

我想为您提供一些重构：)

1) Store 的操作不应该知道接口（服务器端渲染问题，...） - 不好的做法。

2) modal 的数据最好存放在 modal 的父组件中。这是一个例子：https : //jsfiddle.net/yyx990803/70yyx8z2/

然后你就可以做这样的事情（伪代码）：

<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;
},