如何在 Nuxt.js 中创建全局自定义插件

Nuxt.js 和 Vue 一样，支持插件，可以分为三种类型：自定义插件、Vue 插件和外部包和模块。 虽然 Nuxt 文档 详细讨论了最后两个，但它们仅简要说明了如何在 Nuxt 应用程序中构建和使用自定义插件。

全局自定义插件可以在几种情况下派上用场。 例如，假设您找不到要实现的功能的开源插件，或者您对找到的功能不完全满意。 或者，也许你觉得有点创意，你有一些时间在你的手上。

在本教程中，我们将介绍两种不同的选项来构建我们自己的自定义插件，同时使用 Vue 和 JavaScript。 例如，我们的自定义插件将在您的 Nuxt 应用程序的控制台中显示我的生日，但您可以对其进行个性化设置以满足您项目的需求。 让我们开始吧！

• 构建组件

• 店铺

• 将组件订阅到商店

• 初始化插件

• 定义并注册插件

• 使用插件

构建组件

第一步是构建 Vue 组件。 在本文中，我们将使用一个基本的 toast 组件来显示简单的成功和错误消息。 我已经为本文构建了一个，稍后我们将详细介绍它：

<template>
  <div class="toast-element">
    <div :class="['toast-container', { success: state === 'success', error: state === 'error' }]">
      <div class="icon">
        <svg
          v-if="state === 'success'"
          width="8"
          height="7"
          viewBox="0 0 8 7"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M6.96304 0.962891L2.88896 5.37647L1.03711 3.3703" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <svg
          v-else
          width="3"
          height="10"
          viewBox="0 0 3 10"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M1 1.6665V4.99984" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          <path d="M1 8.3335H1.00833" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </div>
      <p>
        {{ message }}
      </p>
    </div>
  </div>
</template>
​
<script>
export default {
  data () {
    return {
      toastIsVisible: false,
      message: '',
      state: ''
    }
  },
  mounted () {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'toast/showToast') {
        this.message = state.toast.content
        this.state = state.toast.state
        this.toastIsVisible = true
        document.querySelector('.toast-element').classList.add('enter')
        setTimeout(() => {
          if (this.toastIsVisible) {
            this.removeToast()
          }
        }, 3000)
      }
    })
  },
  methods: {
    removeToast () {
      document.querySelector('.toast-element').classList.replace('enter', 'leave')
      setTimeout(() => {
        this.toastIsVisible = false
      }, 240)
    }
  }
}
</script>
​
<style scoped>
.toast-element {
  position: fixed;
  top: -90px;
  left: 0;
  width: 100%;
  height: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 7;
  opacity: 0;
  transition: all 240ms cubic-bezier(0, 0.0, 0.2, 1) 0s;
}
.enter {
  top: 20px;
  opacity: 1;
}
.leave {
  top: 20px;
  transform: scale(0.9);
}
.toast-container {
  width: fit-content;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0.9375rem 1.875rem;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 0.9375rem;
  align-items: center;
}
.success {
  border-color: #037F10;
  background-color: #F4FFF6;
}
.error {
  border-color: #FF2525;
  background-color: #FFF4F4;
}
.icon {
  border-radius: 50%;
  display: flex;
}
.success .icon {
  padding: 6px;
  background-color: #037F10;
}
.error .icon {
  padding: 5px 8px 5px 9px;
  background-color: #FF2525;
}
p {
  width: max-content;
  font-size: 1.0625rem;
  font-weight: 400;
}
.success p {
  color: #037F10;
}
.error p {
  color: #FF2525;
}
</style>

toast 组件创建两个按钮，如下所示：

Toast 组件错误信息

Toast 组件成功消息

如果您查看 toast 组件，您会注意到对商店的调用 subscribe()方法。 因为我们的组件是动态的，所以我们需要从某个地方（即商店）获取内容。

店铺

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

export const state = () => ({
  content: '',
  state: ''
})
​
export const mutations = {
  showToast (state, payload) {
    state.content = payload.content
    state.state = payload.state
  }
}

将组件订阅到商店

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

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

this.$store.subscribe((mutation, state) => {
  if (mutation.type === 'toast/showToast') {
    this.message = state.toast.content
    this.state = state.toast.state
    this.toastIsVisible = true
    document.querySelector('.toast-element').classList.add('enter')
    setTimeout(() => {
      if (this.toastIsVisible) {
        this.removeToast()
      }
    }, 3000)
  }
})

我们检查突变的类型是 toast/showToast因为我们的吐司店在 toast.js突变是 showToast()方法。

MyRadio音乐TV版App，已解锁VIP所有功能，拥有全网音乐资源类型！

初始化插件

现在我们已经完成了组件的构建并实现了它的功能，我们需要让它在 Nuxt 应用程序中可用，以便我们可以调用 show在需要时显示 toast 组件的方法； 我们将在 plugins文件夹。

使插件在整个应用程序中可用也称为注入插件，Vue 提供了 inject()为此目的发挥作用。 这反过来又为 show方法与 $:

export default ({ app, store }, inject) => {
  inject('toaster', {
    showToast ({ content = '', state = '' }) {
      store.commit('toast/showToast', { content, state })
    }
  })
}

因此，每当我们称它为 $toaster.showToast()在我们的 Nuxt 应用程序中，我们需要传入 content和 state参数也一样。

但是，如果您的插件用于某些 JavaScript 功能，例如在我们的示例中显示我的生日，那么您只需要以下代码：

export default ({ app }, inject) => {
  inject('displayBirthday', () => {
    console.log(`March 3rd!`)
  })
}

$displayBirthday()会将我的生日记录到您的控制台。 对于这种情况，您不需要商店或组件。

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

定义并注册插件

在渲染插件之前，我们的 Nuxt 应用需要确认 toast 插件存在。 我们可以使用 plugins中的财产 nuxt.config.js文件：

export default {
  plugins: [
    { src: '~/plugins/toaster' }
  ]
}

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

使用插件

有了这个，我们的插件就可以使用了！ 要查看我们的插件，首先，页面上需要显示 toast 组件。 然后，我们可以调用 $toaster.showToast()我们商店的方法和传递 content和 state参数：

this.$toaster.showToast({
  content: 'Successfully logged in!',
  state: 'success'
})

结论

在本文中，我们学习了如何 在Nuxt 应用程序 使用 Vue和 JavaScript 中构建全局自定义插件。 您可以使用此组件在应用程序中实现不同类型的功能，当您找不到适合您项目需求的开源插件时，它会派上用场。 我们还讨论了如何为插件使用组件以及当插件不需要组件时该怎么做。