I am currently working on implementing a feature for a global confirm dialog.
For example: When a user clicks a "publish" button to publish an article, the confirm dialog will open.
- Clicking the publish button triggers the function "openConfirmDialog()".
- The confirm dialog is then displayed.
- Waiting for the user to click the "confirm" button.
- When the confirm button is clicked, the function "onConfirm()" in "confirmDialog.vue" will be triggered.
Questions:
How can I pass and trigger a dynamic action (for example: publishArticle) when the user clicks 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(){....}