Vue.js 当多次加载组件时，eventBus正在侦听重复事件

我在vue.js eventBus上面临着非常重要和奇怪的问题

我的代码是这样的

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

所以，如果我第一次使用这个组件，它将只执行一次。但是，如果我切换到其他组件，然后再次返回到该组件，则事件会发出一次，但侦听器会执行该函数两次。所以每次我访问这个组件时，它都在不断地加载数据。第三次3 Ajax请求。第四次是4个ajax，以此类推

我尝试了以下解决方案

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

因此，上面的代码将删除侦听器，它是否仅在销毁组件时才起作用。但在我的例子中，如果另一个视图使用相同的组件，则会出现相同的问题

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

vue.js中是否已有任何内容

---

如果你不清楚的话，我可以详细解释

也许您需要

eventBus.$one

而不是

eventBus.$on

---

在执行$once后使用$once时，除非再次初始化它，否则将不再调用它。它可以按如下方式应用

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

---

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

那么这个组件一次在多个位置使用？你能把事件监听器放在它们的公共父级中吗？我已经试过了，它在有层次结构的情况下工作。但如果两个组件在同一个级别上呢。例如，我有可重用的

过滤器

组件和可重用的

列表视图

组件。所以，如果过滤器被更新，列表视图必须更新它的数据。在这个场景@JacobGoh中，我们如何才能做到这一点？我真的不知道你的意思。这感觉像是一个应用程序架构问题。您是否能够提取代码来创建一个应用程序？对于快速修复（这可能不是一个好的实践），请使用，以便即使触发了事件，也不会太频繁地调用ajax