Criando um EventBus no Vue.js

Bom, sabemos o quanto é fácil trabalhar com componentes no Vue e comunicação entre eles.

Mas também precisamos de uma ajudinha quando queremos emitir um evento para toda nossa aplicação, como por exemplo uma notificação de forma global, sem ter que ficar implementando os componentes de notificação em todas as telas ou emitindo evento de componente filho para pai, e do pai para seu pai e assim sucessivamente

Esse então será um belo exemplo para utilizarmos um eventbus no Vue.

É bem simples e fácil de criar e utilizar, você poderá criar quantos eventos forem necessários (no nosso exemplo será só um) e emitir um evento com o nome desejado (no nosso caso será “show-notification”), vamos lá.. Ocódigo será esse:

Toda essa estrutura é a padrão do arquivo “main.js” que é gerado quando criamos um projeto no Vue, e o pedaço do código que cria nosso eventbus é essa.

Vue.prototype.$eventHub = new Vue();

Eu chamei de $eventHub, porque no dia não pensei no Bus rsrsrs.

E no mesmo arquivo main.js eu já fico escutando esse eventHub criado para o evento “show-notification” e sempre que emitido, eu chamarei algum plugin de notificação, no caso não implementei nenhum e você utilizar qual desejar.

Para chamar esse evento, você poderá chamar de qualquer componente Vue ou qualquer classe que também implemente/importe o Vue para dentro dela, no exemplo abaixo, estou chamando dentro de um componente aleatório

this.$eventHub.$emit('show-notification', {
   text: "Seu registro foi alterado com sucesso"
})

Com isso, assim que eu chamar essa linha de código acima, irá emitir um evento de nome “show-notification” para dentro do meu “$eventHub” e todo lugar que estiver escutando como nos exemplos acima, serão notificados e realizará a ação que estiver implementada.

this.$eventHub.$on('show-notification', (data) => {
     // Show global notification like toast or sweet alert                    })