Vue.js：EventBus 被多次调用答案

【问题标题】：Vue.js: EventBus being called multiple timesVue.js：EventBus 被多次调用
【发布时间】：2020-06-08 23:17:02
【问题描述】：

我正在构建“撤消删除”的逻辑 - 操作。为此，我使用事件总线将事件发送到两个不相关的组件，如下所示：

Undo.vue:

`EventBus.$emit(`confirm-delete-${this.category}`, this.item.id);`

事件的名称（this.category）基于来自父母（ConfirmDeleteModal.vue）的道具，然后收到如下：

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

我的问题：由于某种原因，category-a 的事件被发出并接收两次（category-b 工作正常）。我必须不断收听confirm-event，因此我无法在收到事件后删除事件侦听器或只收听$once。任何想法如何解决这个问题（也许使用 Vuex）？谢谢！

【问题讨论】：

可能是因为created 运行了两次？你调试了吗？取决于您如何使用这些组件。
但是 CategoryA 和 CategoryB 是不同的组件，所以created 并没有真正运行两次，是吗？
由于类别-a 被接收了两次而类别-b 没有被接收，显然A 和B 之间的某个地方存在差异。请提供可以复制问题的stackoverflow.com/help/mcve。

标签： javascript vue.js vuex vue-events

【解决方案1】：

我也遇到了同样的问题，经过一番研究，我得到了这个解决方案。

您在应用程序中定义了两次组件（CategoryA.vue），导致函数运行两次，在本例中为 CategoryA.vue

解决方案：您必须在 created() 之后调用 destroy() 喜欢，

created() {
    EventBus.$on('confirm-delete-category-a', (id) => {
      this.confirmDelete(id);
    }),
 destroyed() {
            EventBus.$off('confirm-delete-category-a');
        },

【讨论】：