Vue 2'de Global Event Bus (Olay Veri Yolu) Nasıl Oluşturulur?

Büyük Vue.js projelerinde, ebeveyn–çocuk ilişkisi olmayan bileşenlerin haberleşmesi gerekebilir.
Bu noktada Publish–Subscribe (Yayınla–Abone Ol) mantığıyla çalışan Global Event Bus, pratik bir çözüm sunar.

Bu rehberde, Vue 2’nin yerleşik event sistemi kullanılarak uygulama genelinde erişilebilir bir Event Bus oluşturacağız.

⚠️ Önemli Not:
Bu yapı yalnızca Vue 2 içindir.
Vue 3’te $on, $off ve $once kaldırılmıştır.
Vue 3 projelerinde mitt veya tiny-emitter gibi kütüphaneler önerilir.

---

Bu Rehberde Ne Öğreneceksiniz?

• Vue CLI ile Vue 2 proje oluşturma
• Merkezi bir Event Bus tanımlama
• $emit ile global event yayınlama
• $on ile event dinleme
• $off ile bellek sızıntılarını önleme

---

Ön Gereksinimler

• Node.js kurulu olmalıdır
• Vue 2 component yapısına temel düzeyde hakimiyet yeterlidir

---

1️⃣ Proje Kurulumu ve Event Bus Dosyası

npx @vue/cli create rabisu-event-bus --default
cd rabisu-event-bus

• Bu komut Vue 2 tabanlı varsayılan bir proje oluşturur.

---

// src/event-bus.js
import Vue from 'vue';

export const EventBus = new Vue();

• Bu dosya, DOM’dan tamamen bağımsız bir Vue örneği üretir.
• Görevi yalnızca event taşımaktır.

---

2️⃣ Olay Gönderme ($emit)

<!-- src/components/SayacButonu.vue -->
<template>
  <button @click="tiklamaOlayiniGonder">
    Tıklama Sayısı: {&#123; tiklamaSayisi &#125;}
  </button>
</template>

<script>
import &#123; EventBus &#125; from '@/event-bus';

export default {
  data() {
    return { tiklamaSayisi: 0 };
  },
  methods: {
    tiklamaOlayiniGonder() {
      this.tiklamaSayisi++;
      EventBus.$emit('tiklandi', this.tiklamaSayisi);
    }
  }
}
</script>

• Bu bileşen, her tıklamada global bir event yayınlar.

---

3️⃣ Olayları Dinleme ($on)

<!-- src/App.vue -->
<script>
import &#123; EventBus &#125; from './event-bus';
import SayacButonu from './components/SayacButonu';

export default {
  components: &#123; SayacButonu &#125;,
  created() {
    EventBus.$on('tiklandi', (sayi) => {
      console.log(`Butona $&#123;sayi&#125; kez tıklandı`);
    });
  }
}
</script>

• created() hook’u, event dinleyicileri başlatmak için en güvenli noktalardan biridir.

---

4️⃣ Dinleyicileri Kaldırma ($off)

1. Event Bus kullanırken en sık yapılan hata, dinleyicileri temizlememektir.

• Bu durum memory leak oluşturur.

beforeDestroy() {
  EventBus.$off('tiklandi');
}

---

İpuçları

EventBus.$off('tiklandi', callback) → Tek callback’i kaldırır

EventBus.$off('tiklandi') → O event’in tüm dinleyicilerini kaldırır

EventBus.$off() → Event Bus’ı tamamen temizler

---

Sıkça Sorulan Sorular (SSS)

1. Vuex varken neden Event Bus? Küçük ve geçici iletişimler için Vuex gereksiz ağırdır.

2. Event Bus büyük projelerde önerilir mi? Hayır. Karmaşık projelerde Vuex veya Pinia tercih edilmelidir.

3. $once ne işe yarar? Event’i yalnızca ilk tetiklenişte dinler ve otomatik kapanır.

4. Vue 3’te alternatif ne? mitt en yaygın ve hafif çözümdür.

---

Sonuç

Bu rehberde, Vue 2 Global Event Bus yapısını güvenli ve doğru şekilde kurdunuz. Bileşenler arası iletişimi gevşek bağlı (loosely coupled) hale getirdiniz.

Vue 2 projelerinizi yüksek performanslı ve stabil bir altyapıda çalıştırmak için Rabisu Bulut sunucularını güvenle tercih edebilirsiniz 🚀