11. [vuejs-09] projesi: [eventBus] eklentisinin kullanımı

[vuejs-09] projesi, eklenti kavramını getirmesi dışında [vuejs-08] projesiyle aynıdır. Projenin dizin yapısı şöyledir:

11.1. [./plugins/event-bus] eklentisi

[./event-bus.js] betiği, önceki örnekte olduğu gibi kalır:

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

[./plugins/event-bus.js] eklentisi şöyledir:

export default {
  install(Vue, eventBus) {
    // Vue sınıfına [$eventBus] özelliğini ekler
    Object.defineProperty(Vue.prototype, '$eventBus', {
      // Vue.$eventBus referanslandığında, ikinci parametre [eventBus] olarak döndürülür
      get: () => eventBus,
    })
  }
}

Yorumlar

• [Vue] eklentisi, [install] işlevine sahip bir nesnedir (2. satır). Bu işlev, bir kodda eklentinin kullanımı bildirildiğinde otomatik olarak çağrılacaktır;
• 1-9. satırlar: komut dosyası tarafından dışa aktarılan nesne;
• 2. satır: [install] işlevi burada iki parametre kabul eder:
  • [Vue]: [import Vue from ‘Vue’] komutuyla elde edilen işlev. Bir sınıfa benzetilebilir;
  • [eventBus]: [./event-bus] betiği tarafından dışa aktarılan nesne;
• 4-7. satırlar: [Vue] işlevinin tanımını (prototip olarak adlandırılır) [$eventBus] özelliğini ekleyerek değiştirir. [classe] terimini ele alırsak, [$eventBus] özelliği [Vue] sınıfına eklenir. Dolayısıyla, [Vue]'in örnekleri olan bileşenler bu yeni özelliğe erişebilecektir;
• 6. satır, [Vue].$eventBus özelliğine başvurulduğunda, 2. satırdaki [eventBus] parametresinin elde edileceğini belirtir. Biraz ileride göreceğimiz üzere, bu ikinci parametre, [./event-bus.js] komut dosyası tarafından dışa aktarılan [eventBus] nesnesi olacaktır. Sonuç olarak, bir C bileşeni [C.$eventBus] ifadesini kullandığında, [./event-bus.js] komut dosyası tarafından dışa aktarılan [eventBus] nesnesine başvuracaktır. Bu sayede [./event-bus.js] komut dosyasını içe aktarması gerekmeyecektir. Eklentinin faydası da budur: [./event-bus.js] komut dosyası tarafından dışa aktarılan [eventBus] nesnesine erişimi basitleştirmek;
• Eklentinin adının mutlaka [event-bus.js] olması gerekmediğine dikkat edilmelidir. Örneğin, ona [plugin-event-bus] da denilebilirdi;
• ayrıca, [$eventBus] içindeki $ teriminin, eklentiler aracılığıyla eklenen [Vue] özelliklerini belirtmek için kullanılan bir kural olduğu unutulmamalıdır. Bu kurala uymak zorunlu değildir. Bu metinde ise bu kurala uyacağız;

11.2. Ana komut dosyası [main.js]

[./plugins/event-bus.js] betiği, [Vue.js] çerçevesine yönelik bir eklenti tanımlar. Bu eklenti henüz kullanılmamaktadır, sadece tanımlanmıştır. Onu etkinleştiren betik [main.js]’tir:

// ithalatlar
import Vue from 'vue'
import App from './App.vue'

// eklentiler
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);

// yapılandırma
Vue.config.productionTip = false

// proje örneği oluşturma [App]
new Vue({
  render: h => h(App),
}).$mount('#uygulama')

Açıklamalar

• 14-16. satırlar, [PluginEventBus] eklentisini etkinleştirir. 16. satırdan sonra, [Vue] sınıfının (fonksiyonun) tüm örnekleri, her biri için [./event-bus.js] komut dosyası tarafından dışa aktarılan aynı nesneye işaret eden [$eventBus] özelliğine sahiptir. Bu durum, projenin tüm bileşenleri için geçerli olacaktır;

11.3. Ana görünüm [App]

Ana görünüm [App], önceki projedeki haliyle kalır.

11.4. [Component1] bileşeni

[Component1] bileşeni artık [$eventBus] özelliğini kullanarak [someEvent] olayını dinlemektedir:

<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",
    // bileşen durumu
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // olay yönetimi yöntemleri
    methods: {
      // olay yönetimi [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // bileşen yaşam döngüsü yönetimi
    // [created] olayı - bileşen oluşturuldu
    created() {
      // [someEvent] olayını dinleme
      this.$eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Açıklamalar

• 33. satırda, bileşenin [this.$eventBus] özelliği kullanılmaktadır. Ayrıca, 11. satırdaki komut dosyası artık [./event-bus.js] komut dosyasını içe aktarmamaktadır;

11.5. [Component2] bileşeni

[Component2] bileşeni artık [$eventBus] özelliğini kullanarak [someEvent] olayını tetikliyor:

<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- komut dosyası -->
<script>
  export default {
    name: "component2",
    // olay yönetimi yöntemleri
    methods: {
      createEvent() {
        this.$eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Açıklamalar

• 13. satırda, bileşenin [this.$eventBus] özelliğinin kullanıldığı görülmektedir. Ayrıca, 7. satırdaki komut dosyası artık [./event-bus.js] komut dosyasını içe aktarmamaktadır;

11.6. [Component3] Bileşeni

[Component3] bileşeni, [Component1] ile aynı koda sahiptir. Bu bileşen de [someEvent] olayını dinlemektedir.

11.7. Projenin çalıştırılması

Önceki projede olduğu gibi aynı sonuçlar elde edilir.