Pesquisa de site

Como criar um barramento de evento global no Vue 2

Introdução

O padrão de barramento de evento/publicação-assinatura é uma maneira de fazer com que seções não relacionadas de seu aplicativo conversem entre si.

O sistema de eventos usado nos componentes Vue pode ser usado em um padrão de barramento de eventos/publicação-assinatura.

Nota: Este tutorial é específico para Vue 2. Em Vue 3, recomendado.

Neste artigo, você aplicará o poderoso barramento de eventos integrado do Vue.

Pré-requisitos

Para concluir este tutorial, você precisará de:

  • Node.js instalado localmente, o que você pode fazer seguindo Como instalar o Node.js e criar um ambiente de desenvolvimento local.
  • Alguma familiaridade com o uso de componentes Vue.js pode ser benéfica.

Este tutorial foi verificado com Node v15.3.0, npm v6.14.9 e vue v2.6.11.

Passo 1 — Configurando o Projeto

Para este tutorial, você construirá a partir de um projeto Vue padrão gerado com @vue/cli.

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

Isso configurará um novo projeto Vue com as configurações padrão: Vue 2, babel, eslint.

Navegue até o diretório do projeto recém-criado:

  1. cd vue-event-bus-example

Você precisará criar o barramento de eventos e exportá-lo para algum lugar para que outros módulos e componentes possam usá-lo. Primeiro, crie um novo arquivo. Importe a biblioteca Vue. Em seguida, exporte uma instância dele.

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

Para este tutorial, a instância foi definida para a variável EventBus.

O que você está obtendo essencialmente é um componente totalmente desacoplado do DOM ou do restante do seu aplicativo. Tudo o que existe nele são seus métodos de instância.

Agora que você criou o barramento de eventos, precisará importá-lo para seus componentes e chamar os mesmos métodos que usaria se estivesse passando mensagens entre os componentes pai e filho.

Em seguida, vamos aplicar EventBus.$emit().

Passo 2 — Enviando Eventos

Considere um cenário com um componente que notifica o aplicativo inteiro quantas vezes ele foi clicado sempre que alguém clica nele.

Observação: este exemplo usa um componente de arquivo único aqui, mas você pode usar qualquer método de criação de componentes que desejar.

Aqui está como você implementaria isso 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>

Este código produz um botão. Clicar no botão enviaria o evento em um canal (clicked) com uma carga útil (clickCount).

Modifique App.vue para usar este componente.

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

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

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

Em seguida, vamos aplicar EventBus.$on.

Passo 3 — Recebendo Eventos

Agora, qualquer outra parte do seu aplicativo pode importar o barramento de eventos e ouvir no canal clicado usando EventBus.$on(channel: string, callback(payload1, ...)).

Aplique isso ao seu aplicativo 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>

Esse código cria um ouvinte de evento para clicked e registra uma mensagem no console com o número de vezes que o botão foi clicado.

Nota: Se você quiser apenas ouvir a primeira emissão de um evento, você pode usar EventBus.$once(channel: string, callback(payload1,...)).

Em seguida, vamos aplicar EventBus.$off.

Etapa 4 — Removendo ouvintes de eventos

Você pode cancelar o registro do manipulador do canal clicado usando EventBus.$off(channel: string, callback(payload1,...)).

Aplique isso ao seu aplicativo 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>

Ao fornecer um evento e um retorno de chamada, EventBus.$off apenas removerá o ouvinte para esse retorno de chamada específico.

Observação: você também pode remover todos os ouvintes de um determinado evento usando EventBus.$off(clicked) sem nenhum argumento de retorno de chamada.

E se você realmente precisar remover todos os ouvintes de EventBus, independentemente do canal, você pode chamar EventBus.$off() sem nenhum argumento.

Agora, você utilizou .$emit, .$on e .$off.

Conclusão

Neste tutorial, você usou o poderoso barramento de eventos interno do Vue para ouvir um evento clicked e registrar uma mensagem com a contagem de cliques. Isso foi obtido utilizando .$emit, .$on e .$off.

Se você quiser aprender mais sobre Vue.js, confira nossa página de tópicos Vue.js para ver exercícios e projetos de programação.

Artigos relacionados: