Vuejs problems with implement a global confirm dialog feature

I’m implementing a global confirm dialog feature.

For example: The confirm dialog will open when a user clicks a “publish” button to publish an article.

1. The user clicks the publish button triggers the function “openConfirmDialog()”.
2. Show the confirm dialog.
3. Wait for the user to click the “confirm” button.
4. The function( onConfirm() ) in “confirmDialog.vue” will be triggered when the confirm button is clicked.

Questions:
How can I pass and trigger a dynamic action(in this example: pubishArticle ) when the user click the “confirm” button?

Component – confirmDialog.vue Cancel button:

  protected onCancel() {
    this.$store.actions.closeConfirmDialog()
  }

Confirm button:

  protected onConfirm() {
    this.$store.actions.proceedConfirmDialog()
  }

confirm dialog vuex module store actions:

  async openConfirmDialog(
    context: ActionContext<ConfirmDialogState, any>,
    payload: SetConfirmDialogPayloadParams
  ) {
    context.commit(types.CONFIRM_DIALOG_SET_CONTENT, payload.content)
  },

Confirm button action:

async proceedConfirmDialog(context: ActionContext<ConfirmDialogState, any>) {}

frontend views – demo.vue:

  public openConfirmDialog() {
    this.$store.myActions.openConfirmDialog({
      content: {
        message: 'are you sure?',
      }
    })
  }

publish article vuex module store action:

async pubishArticle(){....}

Answer

You could try sending the buttons definition inside openConfirmDialog:

public openConfirmDialog() {
  this.$store.myActions.openConfirmDialog({
    content: { message: 'are you sure?' },
    buttons: [
      { text: 'Confirm', onClick: this.onConfirmButtonClicked },
      { text: 'Cancel', onClick: this.onCancelButtonClicked },
    ],

  })
}

OR

You could just emit a custom event on button click and let the parent component handle it.