Ricerca nel sito web

Come creare un bus di eventi globale in Vue 2

introduzione

Il pattern bus di eventi/pubblicazione-sottoscrizione è un modo per far dialogare tra loro sezioni non correlate della tua applicazione.

Il sistema di eventi utilizzato nei componenti Vue può essere utilizzato in un modello bus di eventi/pubblicazione-sottoscrizione.

Nota: questo tutorial è specifico per Vue 2. In Vue 3, consigliato.

In questo articolo, applicherai il potente bus di eventi integrato di Vue.

Prerequisiti

Per completare questo tutorial, avrai bisogno di:

  • Node.js installato localmente, cosa che puoi fare seguendo Come installare Node.js e creare un ambiente di sviluppo locale.
  • Una certa familiarità con l'utilizzo dei componenti Vue.js potrebbe essere utile.

Questo tutorial è stato verificato con Node v15.3.0, npm v6.14.9 e vue v2.6.11.

Passaggio 1: impostazione del progetto

Ai fini di questo tutorial, creerai da un progetto Vue predefinito generato con @vue/cli.

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

Questo configurerà un nuovo progetto Vue con configurazioni predefinite: Vue 2, babel, eslint.

Passare alla directory del progetto appena creata:

  1. cd vue-event-bus-example

Dovrai creare il bus degli eventi ed esportarlo da qualche parte in modo che altri moduli e componenti possano usarlo. Innanzitutto, crea un nuovo file. Importa la libreria Vue. Quindi, esportane un'istanza.

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

Per questo tutorial, l'istanza è stata impostata sulla variabile EventBus.

Quello che stai essenzialmente ottenendo è un componente completamente disaccoppiato dal DOM o dal resto della tua app. Tutto ciò che esiste su di esso sono i suoi metodi di istanza.

Ora che hai creato il bus degli eventi, dovrai importarlo nei tuoi componenti e chiamare gli stessi metodi che useresti se passassi messaggi tra i componenti padre e figlio.

Successivamente, applichiamo EventBus.$emit().

Passaggio 2: invio di eventi

Considera uno scenario con un componente che notifica all'intera app quante volte è stato fatto clic su di essa ogni volta che qualcuno fa clic su di essa.

Nota: questo esempio utilizza qui un componente a file singolo, ma puoi utilizzare qualsiasi metodo di creazione dei componenti che desideri.

Ecco come faresti per implementarlo usando EventBus.$emit(channel: string, payload1: any, ...):

<template>
  <button @click="emitGlobalClickEvent()">{{ clickCount }}</button>
</template>

<script>
import { EventBus } from '@/event-bus';

export default {
  data() {
    return {
      clickCount: 0
    }
  },

  methods: {
    emitGlobalClickEvent() {
      this.clickCount++;
      EventBus.$emit('clicked', this.clickCount);
    }
  }
}
</script>

Questo codice produce un pulsante. Facendo clic sul pulsante, l'evento verrà inviato su un canale (clicked) con un payload (clickCount).

Modifica App.vue per utilizzare questo componente.

<template>
  <div id="app">
    <ClickCountButton></ClickCountButton>
  </div>
</template>

<script>
import ClickCountButton from './components/ClickCountButton'

export default {
  name: 'App',
  components: {
    ClickCountButton
  }
}
</script>

Successivamente, applichiamo EventBus.$on.

Passaggio 3: ricezione degli eventi

Ora qualsiasi altra parte della tua app può importare il bus degli eventi e ascoltare sul canale cliccato utilizzando EventBus.$on(channel: string, callback(payload1, ...)).

Applicalo alla tua applicazione modificando App.vue:

<script>
import { 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>

Questo codice crea un listener di eventi per clicked e registra un messaggio nella console con il numero di volte in cui è stato fatto clic sul pulsante.

Nota: se desideri ascoltare solo la prima emissione di un evento, puoi utilizzare EventBus.$once(channel: string, callback(payload1,...)).

Successivamente, applichiamo EventBus.$off.

Passaggio 4: rimozione dei listener di eventi

Puoi annullare la registrazione del gestore dal canale cliccato utilizzando EventBus.$off(channel: string, callback(payload1,...)).

Applicalo alla tua applicazione modificando App.vue:

<script>
import { 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>

Fornendo un evento e una richiamata, EventBus.$off rimuoverà solo il listener per questa specifica richiamata.

Nota: puoi anche rimuovere tutti i listener per un particolare evento utilizzando EventBus.$off(clicked) senza argomenti di callback.

E se hai davvero bisogno di rimuovere ogni singolo ascoltatore da EventBus, indipendentemente dal canale, puoi chiamare EventBus.$off() senza alcun argomento.

Ora hai utilizzato .$emit, .$on e .$off.

Conclusione

In questo tutorial, hai utilizzato il potente bus di eventi integrato di Vue per ascoltare un evento clicked e registrare un messaggio con il conteggio dei clic. Ciò è stato ottenuto utilizzando .$emit, .$on e .$off.

Se desideri saperne di più su Vue.js, consulta la nostra pagina degli argomenti su Vue.js per esercizi e progetti di programmazione.

Articoli correlati: