I'm in the process of implementing an 'undo delete' feature. To achieve this, I am utilizing an Event Bus to broadcast an event to two separate components as shown below:
Undo.vue:
EventBus.$emit(`confirm-delete-${this.category}`, this.item.id);
The event name (this.category) is determined by props passed down from a parent component (ConfirmDeleteModal.vue) and then handled in the following manner:
CategoryA.vue
created() {
EventBus.$on('confirm-delete-category-a', (id) => {
this.confirmDelete(id);
});
},
CategoryB.vue
created() {
EventBus.$on('confirm-delete-category-b', (id) => {
this.confirmDelete(id);
});
},
However, I'm facing an issue where the event for category-a is triggered and received twice (while category-b functions correctly). Since I need to continuously monitor the confirm-event, I cannot simply remove the event listener after receiving it or use $once exclusively. Are there any suggestions on how to address this problem (perhaps involving Vuex)? Thank you!