Nuxt.js，像Vue一样，支持插件，可以有三种类型：定制的插件，Vue插件，以及外部包和模块。虽然Nuxt文档详细讨论了后两者，但他们只简单地解释了如何在你的Nuxt应用程序中构建和使用自定义插件。

一个全局的自定义插件在一些情况下可以派上用场。例如，让我们想象一下，你无法为你试图实现的功能找到一个开源插件，或者你对你找到的插件不完全满意。或者，也许你觉得有点创意，而且你手上有一些时间。

在本教程中，我们将介绍使用Vue和JavaScript建立我们自己的自定义插件的两种不同选择。作为一个例子，我们的自定义插件将在你的Nuxt应用程序的控制台中显示我的生日，但你可以根据你的项目需求进行个性化定制。让我们开始吧!

第一步是构建Vue组件。对于这篇文章，我们将使用一个基本的toast组件，它将显示简单的成功和错误信息。我已经为这篇文章构建了一个，我们稍后会详细讨论它：

吐司组件创建了两个按钮，看起来像下面这样：

吐司组件错误信息：

吐司组件的成功信息

如果你回顾一下toast组件，你会注意到对商店的subscribe() 方法的调用。因为我们的组件是动态的，我们需要从某个地方获得内容，即商店。

在我们的toast组件中，有两个变量，toast消息和它的状态，要么是success ，要么是error 。在Vuex的帮助下，我们将在Nuxt应用程序中存储状态。因此，我们需要一个商店，最好是与应用程序的一般商店不同的商店：

现在我们的商店已经准备好了，我们需要在商店和toast组件之间建立一个通信通道。在这里，subscribe() 方法派上了用场，将组件订阅到商店的突变中。因此，它在商店的每次突变后被调用，接收突变和状态对象作为参数。要了解更多关于subscribe() 方法的信息，请查看Vuex API页面上的订阅部分。

因为subscribe() 方法是在商店的每次突变后被调用的，我们需要确认toast商店被突变了。一旦我们确认了这一点，我们就可以继续更新组件的变量、消息和它的状态：

我们检查突变的类型是toast/showToast ，因为我们的toast存储在toast.js ，而突变的方法是showToast() 。

现在我们已经完成了组件的构建和功能的实现，我们需要让它在Nuxt应用程序中可用，这样我们就可以在需要时调用show 方法来显示吐司组件；我们将在plugins 文件夹中这样做。

让插件在整个应用中可用也被称为注入插件，Vue为此提供了inject() 函数。这又给show 方法的对象加上了一个$ 的前缀：

因此，每当我们在Nuxt应用中调用这个$toaster.showToast() 方法时，我们也需要传入content 和state 参数。

然而，如果你的插件是用于一些JavaScript功能，比如在我们的例子中，显示我的生日，那么你只需要下面的代码：

$displayBirthday() 将记录我的生日到你的控制台。对于这样的情况，你就不需要一个商店或一个组件。

如果你仔细注意了这两段代码，你会注意到inject() 函数的第二个参数的类型不同。第一个是一个对象，而第二个是一个函数。当你的插件可能需要多个动作时，对象类型很有用，而函数则最适合于单个动作。然而，对象中可以只有一个方法。

在我们渲染插件之前，我们的Nuxt应用程序需要确认toast插件的存在。我们可以使用nuxt.config.js 文件中的plugins 属性来添加这方面的代码：

插件的注入代码在plugins/toaster.js 文件中。

这样一来，我们的插件就可以使用了!要看到我们的插件在运行，首先，toast组件需要出现在页面上。然后，我们可以调用我们商店的$toaster.showToast() 方法，并传递content 和state 参数：

在这篇文章中，我们已经学会了如何使用Vue和JavaScript在Nuxt应用程序中建立一个全局的自定义插件。你可以使用这个组件在你的应用程序中实现不同类型的功能，当你找不到适合你项目需求的开源插件时，它就派上用场了。我们还讨论了如何去使用该插件的组件，以及当该插件不需要组件时该怎么办。

虽然我们这个教程的例子展示了相当简单的功能，在控制台中显示一个日期，但可以自由地在这个项目的基础上进行定制，以满足你的需求。关于Nuxt插件的更多信息，我建议查看Nuxt文档。祝你建设愉快!