Cómo crear un bus de eventos global en Vue 2

Introducción

El patrón de bus de eventos/publicación-suscripción es una forma de lograr que secciones no relacionadas de su aplicación se comuniquen entre sí.

El sistema de eventos utilizado en los componentes de Vue se puede utilizar en un patrón de bus de eventos/publicación-suscripción.

Nota: Este tutorial es específico para Vue 2. En Vue 3, se han eliminado $on, $off, y . Se $oncerecomiendan bibliotecas externas que proporcionen esta funcionalidad .

En este artículo, aplicará el potente bus de eventos integrado de Vue.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Puede resultar beneficioso tener cierta familiaridad con la configuración de un proyecto Vue.js y el uso de componentes Vue.js.

Este tutorial fue verificado con Node v15.3.0, npmv6.14.9 y vuev2.6.11.

Paso 1: Configuración del proyecto

Para el propósito de este tutorial, construirás a partir de un proyecto Vue predeterminado generado con @vue/cli.

npx @vue/cli create vue-event-bus-example --default

Esto configurará un nuevo proyecto Vue con configuraciones predeterminadas: Vue 2, babel, eslint.

Navegue hasta el directorio del proyecto recién creado:

cd vue-event-bus-example

Necesitarás crear el bus de eventos y exportarlo a algún lugar para que otros módulos y componentes puedan usarlo. Primero, crea un archivo nuevo. Importa la biblioteca Vue. Luego, exporta una instancia de ella.

fuente/event-bus.js

import Vue from 'vue';export const EventBus = new Vue();

Para este tutorial, la instancia se estableció en la variable EventBus.

En esencia, lo que estás obteniendo es un componente que está completamente desacoplado del DOM o del resto de tu aplicación. Todo lo que existe en él son sus métodos de instancia.

Ahora que ha creado el bus de eventos, deberá importarlo a sus componentes y llamar a los mismos métodos que usaría si estuviera pasando mensajes entre los componentes principal y secundario.

A continuación, apliquemos EventBus.$emit().

Paso 2: Envío de eventos

Considere un escenario con un componente que notifica a toda la aplicación cuántas veces se hizo clic en él cada vez que alguien hace clic en él.

Nota: Este ejemplo utiliza un componente de archivo único , pero puede utilizar cualquier método de creación de componentes que desee.

Aquí se explica cómo implementarlo usando EventBus.$emit(channel: string, payload1: any, ...):

fuente/componentes/ClickCountButton.vue

template  button @click="emitGlobalClickEvent()"{{ clickCount }}/button/templatescriptimport { EventBus } from '@/event-bus';export default {  data() {    return {      clickCount: 0    }  },  methods: {    emitGlobalClickEvent() {      this.clickCount++;      EventBus.$emit('clicked', this.clickCount);    }  }}/script

Este código genera un botón. Al hacer clic en el botón, se enviará el evento a un canal ( clicked) con una carga útil ( clickCount).

Modificar App.vuepara utilizar este componente.

origen/App.vue

template  div    ClickCountButton/ClickCountButton  /div/templatescriptimport ClickCountButton from './components/ClickCountButton'export default {  name: 'App',  components: {    ClickCountButton  }}/script

A continuación, apliquemos EventBus.$on.

Paso 3: recepción de eventos

Ahora, cualquier otra parte de tu aplicación puede importar el bus de eventos y escuchar en el clickedcanal usando EventBus.$on(channel: string, callback(payload1,...)).

Aplique esto a su aplicación modificando App.vue:

origen/App.vue

scriptimport { EventBus } from './event-bus';import ClickCountButton from './components/ClickCountButton'export default {  name: 'App',  components: {    ClickCountButton  }}const clickHandler = function(clickCount) {  console.log(`The button has been clicked ${clickCount} times!`)}EventBus.$on('clicked', clickHandler);/script

Este código crea un detector de eventos clickedy registra un mensaje en la consola con la cantidad de veces que se hizo clic en el botón.

Nota: Si solo desea escuchar la primera emisión de un evento, puede utilizar EventBus.$once(channel: string, callback(payload1,...)).

A continuación, apliquemos EventBus.$off.

Paso 4: eliminar los detectores de eventos

Puedes anular el registro del controlador del clickedcanal usando EventBus.$off(channel: string, callback(payload1,...)).

Aplique esto a su aplicación modificando App.vue:

origen/App.vue

scriptimport { EventBus } from './event-bus';import ClickCountButton from './components/ClickCountButton'export default {  name: 'App',  components: {    ClickCountButton  }}const clickHandler = function(clickCount) {  console.log(`The button has been clicked ${clickCount} times!`)}EventBus.$on('clicked', clickHandler);EventBus.$off('clicked', clickHandler);/script

Al proporcionar un evento y una devolución de llamada, EventBus.$offsolo se eliminará el oyente para esta devolución de llamada específica.

Nota: También puedes eliminar todos los oyentes de un evento en particular EventBus.$off('clicked')sin ningún argumento de devolución de llamada.

Y si realmente necesitas eliminar todos los oyentes de EventBus, independientemente del canal, puedes llamar EventBus.$off()sin ningún argumento.

Ahora, has utilizado .$emit, .$on, y .$off.

Conclusión

En este tutorial, utilizó el potente bus de eventos integrado de Vue para escuchar un clickedevento y registrar un mensaje con el recuento de clics. Esto se logró utilizando .$emit, .$ony .$off.

Si desea obtener más información sobre Vue.js, consulte nuestra página de temas de Vue.js para obtener ejercicios y proyectos de programación.