NuxtJS Access 在 nuxtjs 注入方法中安裝了 vue 插件

Question

我想安裝 VueToast package 作為插件，並使用 nuxt 插件添加全局幫助方法。 如下所示，我在 5-11 行之間安裝插件。 我需要在第 18 行訪問 $toast 道具。但是我無法訪問 $toast 道具。 如何在注入方法中訪問 $toast 道具？

Nuxt 版本：2.15.8 Vue 版本：2.6.14 Vue Toast 通知版本：0.6.2 Vue Toast 通知鏈接： https://github.com/ankurk91/vue-toast-notification/tree/v1.x

toast-plugin.js

import Vue from 'vue'
import VueToast from 'vue-toast-notification'
import 'vue-toast-notification/dist/theme-default.css'

Vue.use(VueToast, {
  position: 'top-right',
  duration: 3000,
  dismissible: true,
  queue: false,
  pauseOnHover: true
})

export default (context, inject) => {
  inject('showToast', {
    show ({
      message
    }) {
      context.app.$toast.open({
        message,
        type: 'error'
      })
    }
  })
}

nuxt.config.js

...
  plugins: [
    '~/plugins/vee-validate',
    '~/plugins/toast-plugin.js',
    '~/plugins/loading-overlay-plugin.js',
    '~/plugins/axios-plugin.js',
    '~/plugins/http-client-plugin.js',
    '~/plugins/services.js',
    '~/plugins/snackbar-plugin.js'
  ],
...

Answer 1

我建議你安裝@nuxtjs/toast。 它在引擎蓋下使用 vue-toasted

您可以像這樣訪問已安裝的插件

export default ({ app }, inject) => {
    console.log(app.store, app.yourInstalledPluginGlobalName)
}