多次加载组件时，eventBus 正在侦听重复事件答案

【问题标题】：eventBus is listening duplicate events when component is loaded multiple times多次加载组件时，eventBus 正在侦听重复事件
【发布时间】：2018-09-04 04:19:57
【问题描述】：

我在使用 vue.js eventBus 时遇到了非常重要且奇怪的问题。

我的代码是这样的，

mounted: function() {
    eventBus.$on('load-item', () => {
        // some loading data ajax 
    })
}

所以，如果我第一次进入这个组件，它只会执行一次。但是，如果我切换到其他组件，然后再次返回到该组件，则事件会发出一次，但侦听器会执行此函数 2 次。所以每次我访问这个组件时，它都会越来越多地加载数据。第三次 3 Ajax 请求。第 4 次 4 ajax 等等。

我尝试了以下解决方案，

beforeDestroy: function () {
    eventBus.$off('load-item');
}

所以上面的代码将删除监听器，它是否只有在它销毁组件时才起作用。但就我而言，如果另一个视图使用相同的组件，则会出现相同的问题。

我的问题是，当我们更改页面时，完全删除事件监听器的最佳方法是什么？

vue.js 中有什么东西吗？

如果您不清楚，我可以详细解释。

【问题讨论】：

所以这个组件一次在多个地方使用？您可以将事件侦听器放在它们的共同父级中吗？
我已经尝试过了，它在有层次结构时有效。但是，如果 2 个组件在同一级别上怎么办。例如，我有可重用的filters 组件和可重用的list-view 组件。所以如果过滤器被更新，列表视图必须更新它的数据。
在这种情况下我们如何才能做到这一点@JacobGoh？
我真的不明白你的意思。这感觉像是一个应用程序架构问题。你能把代码提取出来创建一个Minimal, Complete, and Verifiable example吗？
为了快速修复（这可能不是一个好习惯），使用debounce 这样即使触发了事件，也不会过于频繁地调用 ajax

标签： vue.js vuejs2 vue-component

【解决方案1】：

也许你需要eventBus.$once 而不是eventBus.$on 在执行后使用 $once 时，除非再次初始化，否则将不再调用它

【讨论】：

【解决方案2】：

如果是唯一的事件名称。可以如下应用

mounted: function() {
    if (!eventBus._events['load-item']) {
        eventBus.$on('load-item', () => {
            // some loading data ajax 
        })
    }
}

但是，我知道使用 vuex 比使用事件总线更好。

【讨论】：