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



我想安装VueToast包作为插件,并使用nuxt插件添加全局帮助程序方法。如下所示,我在5-11行之间安装插件。我需要访问第18行的$toast道具。但是,我无法访问$toast道具。如何在inject方法中访问$toast道具?

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

烤面包-布丁.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'
],
...

我建议您安装@nuxtjs/toots。它使用在引擎盖下烘烤的vue

你可以访问你安装的插件,比如这个

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

最新更新