Vue.js 如何在Nuxt中使用eventHub？

如何在Nuxt.js上使用eventHub？
我们通常在main.js中设置eventHub，如下所示：

导出默认值{
名称：“应用程序”，
数据（）{
返回{
eventHub:新的Vue（）
};
},
提供（）{
返回{
eventHub:this.eventHub
};
}
};

---

现在的问题是nuxt不是main.js，如何在nuxt中配置eventHub？

在nuxt中实现这一点的最简单方法是创建一个注入事件中心的自定义插件

在“plugins/”目录中创建一个名为“eventHub.js”的文件

从“Vue”导入Vue
导出默认值（上下文，注入）=>{
const$eventHub=new Vue（）
注入（'eventHub'，$eventHub）
}

现在，在“nuxt.config.js”中注册插件

插件：[
{src:'~/plugins/eventHub.js'}，
],

你可以走了！您可以从任何引用它的Vue组件内部使用它，如下所示：

//事件侦听
此.$eventHub.$on（'test-event'，（）=>{}）
//事件发射
此.$eventHub.$emit（'test-event'））

---

您还可以在Nuxts“context”对象中使用$eventHub对象，也可以从存储中的任何变化或操作中使用它（尽管我会谨慎地使用它）。

@Guillermo的解决方案应该可以工作。但是，您不必使用插件。相反，您可以使用

$numxt.$emit

。它与Guillermo的建议相同，但不要求您注册插件

只需在一个组件中注册一个侦听器：

// Code in a Component
beforeMount() {
   this.$nuxt.$on('my-event', () => { console.log("Hello!")});
}

现在您可以在另一个组件中触发事件，第一个组件将侦听它们。您可以按如下方式触发这些事件：

// Code in some other Component
methods() {
  letComponentSayHello() {
    this.$nuxt.$emit("my-event");
  }
}

如果需要在装入组件后触发事件，请确保在

beforeMounted（）

-Hook中注册侦听器。这里也有人建议这样做

我在文件上找不到关于这件事的信息。尽管如此，还是有一篇文章建议使用

$numxt.$emit

。

---

您能给我看看eventHub的软件包吗？或文档页面