11. Projeto [vuejs-09]: uso de um plugin [eventBus]

O projeto [vuejs-09] é idêntico ao projeto [vuejs-08], exceto pelo fato de introduzir o conceito de plugin. A estrutura do projeto é a seguinte:

11.1. O plug-in [./plugins/event-bus]

O script [./event-bus.js] permanece o mesmo do exemplo anterior:


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

O plugin [./plugins/event-bus.js] é o seguinte:


export default {
  install(Vue, eventBus) {
    // adiciona uma propriedade [$eventBus] à classe Vue
    Object.defineProperty(Vue.prototype, '$eventBus', {
      // quando Vue.$eventBus é referenciado, o segundo parâmetro é definido como [eventBus]
      get: () => eventBus,
    })
  }
}

Comentários

um plugin [Vue] é um objeto que possui uma função [install] (linha 2). Essa função será chamada automaticamente quando um código declarar o uso do plugin;
linhas 1-9: o objeto exportado pelo script;
linha 2: a função [install] aceita aqui dois parâmetros:
- [Vue]: a função obtida pela instrução [import Vue from ‘Vue’]. Pode ser equiparada a uma classe;
- [eventBus]: o objeto exportado pelo script [./event-bus];
linhas 4-7: modificam a definição (conhecida como protótipo) da função [Vue], adicionando-lhe a propriedade [$eventBus]. Se considerarmos o termo [classe], a propriedade [$eventBus] é adicionada à classe [Vue]. Os componentes que são instâncias de [Vue] terão, portanto, acesso a essa nova propriedade;
a linha 6 indica que, ao referenciar a propriedade [Vue].$eventBus, obteremos o parâmetro [eventBus] da linha 2. Veremos um pouco mais adiante que esse segundo parâmetro será o objeto [eventBus] exportado pelo script [./event-bus.js]. Portanto, no final das contas, quando um componente C utilizar a expressão [C.$eventBus], ele fará referência ao objeto [eventBus] exportado pelo script [./event-bus.js]. Isso evitará que ele importe o script [./event-bus.js]. A vantagem do plugin está justamente nisso: simplificar o acesso ao objeto [eventBus] exportado pelo script [./event-bus.js];
vale notar que o plugin não precisa se chamar [event-bus.js]. Poderíamos tê-lo chamado de [plugin-event-bus], por exemplo;
observe-se também que o termo $ em [$eventBus] é uma convenção para designar as propriedades de [Vue] que foram adicionadas por meio de plug-ins. Não é obrigatório seguir essa convenção. Neste texto, vamos segui-la;

11.2. O script principal [main.js]

O script [./plugins/event-bus.js] define um plugin para o framework [Vue.js]. Esse plugin ainda não está sendo utilizado, apenas definido. É o script [main.js] que o ativa:


// importações
import Vue from 'vue'
import App from './App.vue'

// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// eventbus
import eventBus from './event-bus';
import PluginEventBus from './plugins/event-bus';
Vue.use(PluginEventBus, eventBus);

// configuração
Vue.config.productionTip = false

// instanciação do projeto [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

Comentários

as linhas 14 a 16 ativam o plug-in [PluginEventBus]. Após a linha 16, todas as instâncias da classe (função) [Vue] possuem a propriedade [$eventBus], que, para cada uma delas, aponta para o mesmo objeto exportado pelo script [./event-bus.js]. Isso se aplica a todos os componentes do projeto;

11.3. A visualização principal [App]

A vista principal [App] permanece igual à do projeto anterior.

11.4. O componente [Component1]

O componente [Component1] agora utiliza sua propriedade [$eventBus] para escutar o evento [someEvent]:


<template>
  <b-row>
    <b-col>
      <b-alert show
               variant="warning"
               v-if="showMsg">Evénement [someEvent] intercepté par [Component1]. Valeur reçue={{data}}</b-alert>
    </b-col>
  </b-row>
</template>

<script>
  export default {
    name: "component1",
    // estado do componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // métodos de gerenciamento de eventos
    methods: {
      // gerenciamento do evento [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestão do ciclo de vida do componente
    // evento [created] — o componente foi criado
    created() {
      // escuta do evento [someEvent]
      this.$eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Comentários

linha 33, uso da propriedade [this.$eventBus] do componente. Observe-se, além disso, que o script da linha 11 não importa mais o script [./event-bus.js];

11.5. O componente [Component2]

O componente [Component2] agora utiliza sua propriedade [$eventBus] para emitir o evento [someEvent]:


<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- script -->
<script>
  export default {
    name: "component2",
    // métodos de gerenciamento de eventos
    methods: {
      createEvent() {
        this.$eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Comentários

linha 13, uso da propriedade [this.$eventBus] do componente. Observe-se, além disso, que o script da linha 7 não importa mais o script [./event-bus.js];

11.6. Componente [Component3]

O componente [Component3] possui o mesmo código que o [Component1]. Ele também escuta o evento [someEvent].

11.7. Execução do projeto

Obtêm-se os mesmos resultados que no projeto anterior.