Mitt Kütüphanesini Kullanarak Vue 3 ile Event Bus Oluşturmak

3 min readMay 30, 2024

Mitt kütüphanesini kullanarak Vue 3 projelerinde Event Bus oluşturmak oldukça kolaydır. Mitt, hafif bir olay yöneticisi (Event Emitter) kütüphanesidir ve Vue 3 ile uyumlu olarak çalışır.

Mitt Kütüphanesini Dahil Etme

Öncelikle Mitt kütüphanesini projenize dahil etmeniz gerekiyor.

Ben Client-Side Library.. ekleme adımında jsdelivr CDN ile local ime js dosyalarını ekleyerek kullanmayı tercih ediyorum.

Projeniz de ilgili js klasörünüze sağ tıklayarak Client-Side Library.. adımı ile kütüphane ekleme.

mitt.udm.js dosyasını yüklememiz yeterli

Fakat uğraşmak istemeyenler için jsdelivr CDN url ile aşağıdaki örneği vereceğim.

`_Layout.cshtml`

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - My ASP.NET Core Application</title>
    <link rel="stylesheet" href="~/css/site.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mitt/dist/mitt.umd.js"></script>
</head>
<body>
    <div id="app">
        @RenderBody()
    </div>
    <script>
        // Mitt Event Bus oluşturma
        const eventBus = mitt();

        // Vue uygulaması oluşturma
        const app = Vue.createApp({
            data() {
                return {
                    globalMessage: 'This is a global message.'
                };
            }
        });

        // Event Bus'u Vue uygulamasına global property olarak ekleme
        app.config.globalProperties.$bus = eventBus;

        app.mount('#app');
    </script>
    @RenderSection("Scripts", required: false)
</body>
</html>

Böylece eventbus yapımızı global property olarak Vue app e eklemiş oluyoruz. Tüm bileşenler(component) lardan erişilebilir bir değişken nesnesi gibi düşünebilirsiniz.

Event Bus Kullanımı

Mitt kullanarak oluşturduğunuz Event Bus’ı bileşenler(component) arasında iletişim için kullanabilirsiniz.

Component1

Component1 de eventbus üzerinden custom-event emit edilir.

<template id="component1-template">
  <div>
    <button @click="sendEvent">Send Event</button>
  </div>
</template>

<script>
  app.component('component1', {
    template: document.getElementById('#component1-template').innerHTML,
    methods: {
      sendEvent() {
        this.$bus.emit('custom-event', 'Hello from Component 1');
      }
    }
  });
</script>

Component2

eventbus üzerindeki event leri on fonksiyonu ile yakalıyor ve ilgili metodumuza yönlendiriyoruz. Bunu component mounted olduğunda yaparsanız daha iyi olur. beforeUnmount da ise off ile event dinlemeyi kaldırmayı sağlayabilirsiniz. Kaynakları geri bırakmak açısından faydalı olacaktır.

<template id="component2-template">
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  app.component('component2', {
    template: document.getElementById('#component2-template').innerHTML,
    data() {
      return {
        message: ''
      };
    },
    mounted() {
      this.$bus.on('custom-event', this.handleEvent);
    },
    beforeUnmount() {
      this.$bus.off('custom-event', this.handleEvent);
    },
    methods: {
      handleEvent(payload) {
        this.message = payload;
      }
    }
  });
</script>

`Index.cshtml`

Son olarak, bu bileşenleri kullanarak bir sayfa oluşturun.

@{
    ViewData["Title"] = "Home Page";
}

<div>
    <h1>Welcome to the Home Page</h1>
    <component1></component1>
    <component2></component2>
</div>

@section Scripts {
    <script>
        // Component tanımlamaları buraya eklenmiştir
    </script>
}

Özet

Mitt Kütüphanesini Dahil Etme: Mitt kütüphanesini CDN üzerinden dahil ettik.
Event Bus Oluşturma: Mitt kullanarak bir Event Bus oluşturduk ve bunu Vue uygulamasına global property olarak ekledik.
Olay Gönderme: Component1 bileşeninden this.$bus.emit('custom-event', 'Hello from Component 1') ile olay gönderiyoruz.
Olay Dinleme: Component2 bileşeninde this.$bus.on('custom-event', this.handleEvent) ile olayı dinliyoruz ve olayı ele alıyoruz.

Bu yöntemle, Vue 3 ve Mitt kullanarak parent-child ilişkisi olmayan component ler arasında etkin bir şekilde veri gönderebilir ve metot çağırabilirsiniz. Bu yöntem bileşenler arasındaki iletişimi yönetmek için etkili bir yoldur.