关键词：
【中文标题】如何从 nuxt 插件发出事件？【英文标题】：How do you emit an event from a nuxt plugin? 【发布时间】：2019-09-28 00:51:58 【问题描述】：我正在创建一个插件，它将发出由套接字触发的基本 nuxt 事件。然后将收到 nuxt 事件并打开一个小吃店。在组件内部时，使用$nuxt 可以轻松发送和接收事件
this.$nuxt.$on('open-snackbar', this.handler)
this.$nuxt.$emit('open-snackbar', options)
但是我如何尝试在插件中执行此操作，因此它不绑定到任何一个页面，而是存在于整个应用程序中。我似乎无法弄清楚如何从所述插件中发出它：
export default (context) =>
console.log(context)
console.log(context.$emit)
console.log(context.emit)
console.log(context.$nuxt)
console.log(context.app.emit)
console.log(context.app.$nuxt)
context.app 似乎是正确的对象，但它似乎不起作用。有什么想法吗？
【问题讨论】：
【参考方案1】：你可以在你的 plugin.js 文件中使用类似的东西，插件会使用window.$nuxt.$emit，它在客户端可用
export default function (context)
$nuxt.$emit('event-to-emit')
【讨论】：
我的nuxt.config.js 中有 ..., target: 'static', s-s-r: false
【参考方案2】：
我想出了另一种方法，即使用 Vue 本身创建手动事件总线并使用 combined inject
在我的例子中，我有一个全局 axios 拦截器来检查状态代码 401 的响应，这意味着用户的会话已过期，然后向他们显示通知。
// my-plugin.js
import Vue from 'vue'
export default function ( $axios, app , inject)
inject('eventHub', new Vue()); // this is the same as Vue.prototype.$eventHub = new Vue()
// checking for status
$axios.onError((error) =>
const code = parseInt(error.response && error.response.status)
if (code === 401)
app.$auth.logout() // logout if errors have happened
app.$eventHub.$emit('session-expired')
)
现在可以在上下文和任何 Vue 实例中访问事件总线
// login.vue
export default
data()
// data
,
created()
this.$eventHub.$once('session-expired', ()=>
this.showAlert()
)
,
methods:
showAlert()
// display notifcations
【讨论】：
看上面的答案，他们恰好有相同的解决方案。【参考方案3】：这不是我正在寻找的解决方案，但作为一种解决方法，我注入了另一个 vue 实例作为插件用作事件总线。它没有像我最初想要的那样使用 nuxt 上下文，但它可以工作。
import Vue from 'vue'
export const bus = new Vue()
export default (_context, inject) =>
// Client only
if (process.client)
// Event bus for plugins
inject('bus', bus)
/**
* Socket that pops open a snackbar
*/
export default ( app: $bus, $sockets ) =>
// Incoming message
$sockets.on('message', payload =>
// When we are on the messages page with the user
if (window.location.pathname === `/messages/$payload.message.sender.username`)
$bus.$emit('message-conversation', payload)
// Elsewhere, or messages with a different user
else
$bus.$emit('open-snackbar',
body: payload.message.body,
link: `/messages/$payload.message.sender.username`,
user: payload.message.sender
)
)
// Incoming notification
$sockets.on('notification', payload =>
$bus.$emit('open-snackbar',
body: payload.notification.text,
link: payload.notification.link || '/notifications',
user: payload.notification.source
)
)
【讨论】：
如何从工厂发出事件
】如何从工厂发出事件【英文标题】：howtoemiteventsfromafactory【发布时间】：2012-12-1223:21:05【问题描述】：如何从工厂或服务发出事件。我无法将$scope注入工厂，因此无法发出事件。我收到以下错误-Unknownprovider:$scopeProvider<-$s... 查看详情
如何从外部发出一个 fabric.js 事件
】如何从外部发出一个fabric.js事件【英文标题】：HowcanIemitafabric.jseventfromtheoutside【发布时间】：2021-06-1017:51:41【问题描述】：。假设我有一个3D模型，回到鼠标的位置，给我画布的uv坐标……我想发出click、mousemove、mouseup事件目... 查看详情
如何从父级向子级发出事件？
】如何从父级向子级发出事件？【英文标题】：Howtoemitaneventfromparenttochild?【发布时间】：2017-10-1814:11:06【问题描述】：我目前正在使用Angular2。通常我们使用@Output()addTab=newEventEmitter<any>();然后addTab.emit()向父组件发出事... 查看详情
如何在 nuxt js 中使用 vuetify 作为插件？
】如何在nuxtjs中使用vuetify作为插件？【英文标题】：Howtousevuetifyinnuxtjsasplugin?【发布时间】：2020-04-2321:43:53【问题描述】：我需要在我的nuxtjs项目中使用vuetify作为插件。我试过包@nuxtjs/vuetify，但得到错误无法分配给对象“#”的... 查看详情
Vue.js 从服务发出事件
...ice【发布时间】：2019-02-0519:16:46【问题描述】：我想知道如何从.js文件（提供文件上传服务的类）向组件发出事件。我的想法是为进度UI元素发出四个事件。我的服务.js文件是这样的：importVuefrom\'vue\';exportconstUploaderService=newVue(met... 查看详情
如何在 Nuxt.js 的 axios 插件中访问当前的 fullPath？
】如何在Nuxt.js的axios插件中访问当前的fullPath？【英文标题】：HowcanIaccessthecurrentfullPathinsideofaaxiosplugininNuxt.js?【发布时间】：2020-02-0807:01:42【问题描述】：我正在尝试从Axios的Nuxt插件中获取通过route.fullPath的当前路径。它在一定... 查看详情
如何从一个进程向多个其他进程发出信号？
】如何从一个进程向多个其他进程发出信号？【英文标题】：Howtosignalfromoneprocesstomultipleotherprocesses?【发布时间】：2016-04-1309:36:19【问题描述】：我想从一个进程向多个其他进程发送“信号/通知”，但是似乎没有直接的解决方案... 查看详情
PyQt5 - 如何从工作线程发出信号以通过 GUI 线程调用事件
】PyQt5-如何从工作线程发出信号以通过GUI线程调用事件【英文标题】：PyQt5-HowtoemitsignalfromworkertreadtocalleventbyGUIthread【发布时间】：2016-12-1612:44:13【问题描述】：正如我在标题中提到的。我该怎么做？classMain(QWidget):def__init__(self):s... 查看详情
Node.js - 如何从 app.js 外部发出 socket.io 事件？
】Node.js-如何从app.js外部发出socket.io事件？【英文标题】：Node.js-Howtoemitsocket.ioeventsfromoutsideapp.js?【发布时间】：2014-05-2414:31:16【问题描述】：我一直在尝试以一种简单而有效的方式组织我的应用程序，而不是在app.js文件的底部... 查看详情
如何在 Nuxt 插件中使用错误功能？
】如何在Nuxt插件中使用错误功能？【英文标题】：HowCanIuseerrorfunctioninNuxtPlugin?【发布时间】：2018-12-0623:09:54【问题描述】：我正在使用Nuxt和axios-module。我试图通过axios全局拦截器进行全局错误处理。如何在Nuxt插件中使用错误函... 查看详情
如何在 vue3 中的“setup”方法中“发出”事件？
】如何在vue3中的“setup”方法中“发出”事件？【英文标题】：Howto`emit`eventoutof`setup`methodinvue3?【发布时间】：2021-04-1513:16:26【问题描述】：我知道我可以从setup方法调用emit方法，但是有没有办法从任何其他函数发出事件而不从s... 查看详情
如何在nuxt中使用vue插件
】如何在nuxt中使用vue插件【英文标题】：Howtousevueplugininnuxt【发布时间】：2020-06-2904:31:19【问题描述】：有一个叫vue-chat-scroll的插件，我想在nuxt中使用它。我是初学者，所以我不能真正理解如何，但我想知道是否可以在nuxt中使... 查看详情
如何访问 Nuxt 插件中的 .env 变量？
】如何访问Nuxt插件中的.env变量？【英文标题】：Howtoaccess.envvariablesinaNuxtplugin?【发布时间】：2021-08-0701:37:13【问题描述】：SegmentAnalytics提供了一个带有秘密API密钥的sn-p。在我的Nuxt.js项目中，我创建了一个名为segment.js的插件，... 查看详情
为啥 Nuxt 向“用户”端点发出多个请求？
】为啥Nuxt向“用户”端点发出多个请求？【英文标题】：WhyNuxtmakingmultiplerequestforthe"user"endpoint?为什么Nuxt向“用户”端点发出多个请求？【发布时间】：2021-10-1403:48:02【问题描述】：有一个Express服务器和一个Nuxt客户端。... 查看详情
jQuery 插件：如何从事件中访问？
】jQuery插件：如何从事件中访问？【英文标题】：jQueryPlugin:howtoaccessfromanevent?【发布时间】：2014-01-1105:10:44【问题描述】：假设我有这个非常基本的插件：(function($)"usestrict";//Namespacedmethods.varmethods=init:function(options)returnthis.each(fun... 查看详情
nuxt 插件文件夹中的 Javascript - 如何在组件中使用？
】nuxt插件文件夹中的Javascript-如何在组件中使用？【英文标题】：Javascriptinnuxtpluginsfolder-howtouseincomponent?【发布时间】：2021-03-1122:52:40【问题描述】：我的Nuxt插件文件夹中有一个javascript变量(vartestButton)。然后我将该文件添加到... 查看详情
如何将第三方插件导入 Nuxt 并在挂载钩子期间初始化？
】如何将第三方插件导入Nuxt并在挂载钩子期间初始化？【英文标题】：HowtoimportthirdpartypluginintoNuxtandinitializeduringmountedhook?【发布时间】：2020-10-3104:07:37【问题描述】：在Nuxt中使用第三方插件的正确方法是什么？我查阅了Nuxt插件... 查看详情
如何使用 Nuxt.js 仅在一个组件中使用插件？
】如何使用Nuxt.js仅在一个组件中使用插件？【英文标题】：HowtouseplugininonlyonecomponentusingNuxt.js?【发布时间】：2021-11-1617:45:13【问题描述】：我正在用nuxt.js做一个简单的博客网站，我只需要在一个组件中导入编辑器，我不想使用n... 查看详情