Vue.js (5) : Bileşenlerin Birbiriyle Haberleşmesi ve Vuex

Vue.js ile uygulama geliştirirken, bileşenler üzerine bir yapı kuruyoruz. Bu yazımızda, bileşenler birbiriyle nasıl haberleşiyor; ana bileşenden detay bileşenlere, detay bileşenden diğer detay bileşenlere nasıl veri gönderilir? Tüm olası senaryoları inceleyeceğiz ve vuex kütüphanesinin bu konuya nasıl bir katkı sağladığına bakacağız.

Ana Bileşenden Detay Bileşenlere Veri Aktarma

props özelliğini kullanarak veri aktarabiliriz. vue-cli ile webpack-simple şablonuyla bir proje oluşturalım. src dizininin içerisine Components dizini oluşturalım. Components dizininin içinde de Child.vue dosyası oluşturalım.

Child.vue:

App.vue:

input’a veri girdiğimiz zaman detay bileşene reaktif olarak yansıdığını görürüz.

Detay bileşenden Ana bileşene Mesaj Gönderme

Tersi durumda nasıl yaparız? Yani detay bileşenden ana bileşene nasıl mesaj göndeririz? Temel olarak üç şekilde yaparız:

custom event kullanarak:

Detay bileşenden custom event gönderiyoruz. Bu eventi dinleyen ana bileşen gelen veriyi işliyor. Bu yönteme göre Child.vue ve App.vue bileşenlerini tekrar yazalım:

Child.vue:

app.vue:

Ana bileşen @messageFromChild ifadesi ile (v-on:messageFromChild ifadesinin kısaltması), messageFromChild eventini dinler ve olay gerçekleşince, kendi datasını günceller.

Callback İle Ana Bileşene Mesaj Gönderme:

Bahsedeceğimiz diğer yöntem, callback kullanarak veri iletme.

child.vue:

App.vue:

Ana bileşenden detay bileşene nasıl property gönderdiysek benzer şekilde de callback fonksiyon iletebiliyoruz.

Event Bus Kullanarak Veri Göndermek

Şimdi örneğimizi daha da geliştirelim. Bir detay bileşenden diğer bir detay bileşene veri aktaralım.

eventbusapp uygulamasını oluşturalım. main.js dosyasına eventBus nesnesi ekleyelim. Herhangi bir dom elemanına bağlanmayan bir vue nesnesi oluşturuyoruz. Bu nesneyi sadece veri iletme kanalı olarak kullanıyoruz. Yani tüm bileşenler buraya event yollayabilirler. Bu eventlerle ilgilenen diğer bileşenlerde dinleyerek ona göre aksiyon alabilirler.

main.js:

Bileşenleri eventBus’ı kullanacak şekilde güncelliyoruz.

ChildA:

ChildB:

ChildA bileşeni, keyupevent metodunda, bahsettiğimiz eventbus nesnesine event yolluyor. ChildB bileşeni de bu eventi dinlediği için, reaktif olarak kendi datasını güncelliyor.

App.vue:

Vuex Nedir?

Küçük ve orta boy uygulamalar için bu saydığımız yöntemler geçerli ve uygun yöntemlerdir. Fakat uygulama büyüdükçe ve karmaşıklığı arttıkça bu tür yöntemler, uygulamanın işleyişini anlamamızı ve takip edebilmemizi güçleştirecektir. Bu yüzden react sisteminde olduğu gibi flux, redux benzeri yapılara ihtiyaç duyulmuştur.

Vuex, merkezi bir durum yönetim kütüphanesidir. Flux mimarisini Vue sisteminde uygulamamıza yardımcı olmaktadır. Uygulama verilerini, tahmin edilebilir ve şeffaf bir durumda tutar. Bileşenlerin ihtiyaç duyduğu ortak veriler merkezi bir yerde tutulur.

Vue ekosisteminde, vuex kütüphanesi bizim merkezi yapı (central store) ihtiyacımızı karşılayacaktır.

vuexapp uygulamasını oluşturalım.

vuex kütüphanesini kuralım.

Şimdi store yapısını oluşturmak için src dizininde store.js dosyası oluşturuyorum:

store.js:

store.js dosyasını main.js dosyasında import edip, vue objemize opsiyon olarak gönderiyoruz:

store.js dosyasında, vuex store’u tanımlıyoruz. Bileşenlerin state nesnesine doğrudan ulaşmasını istemiyoruz. getters metodları ile veriler okunuyor. Değişiklik gerektiğinde de mutasyon metodları ile değişiklik gerçekleştiriliyor.

Mutasyon metodları senkron çalışıyor. Bu şekilde çalışması, mevcut state’ın başka bir state’e geçmesi durumunda, asenkron metodların yan etkilerinden kurtulmak için ve tahmin edilebilir bir yapıda kalması için gereklidir.

Aynı şekilde ChildA.vue ve ChildB.vue bileşenlerini src/components dizininin içerisinde tanımlayalım.

ChildA.vue

ChildB.vue

App.vue:

Bu sefer görüldüğü gibi ChildA’nın keyup metodunda,

ifadesiyle setMessageA mutasyon metodunu çağırıyoruz.

ChildB ise getMessageA getteri ile değeri reaktif olarak alıyor. Daha önce belirttiğimiz gibi mutasyon metodları senkron olarak çalışırlar.

Fakat state’ı asenkron çalışan metodlar ile de güncelleyebiliriz. Bu durumda action metodları tanımlamamız gerekiyor. Aslına bakarsanız ne olursa olsun, ister senkron ister asenkron olsun, doğru olan ve tavsiye edilen yöntem, state’ı değiştirmek için action tanımlanması ve action metodlarının bileşenler tarafından çağrılması. Bu yüzden örneğimizi action kullanacak şekilde değiştireceğiz.

store.js:

ChildA.vue:

ChildA bileşeninden dispatch metodu ile action metodunu çağırıyoruz.

Son olarak proje dizin yapısına bakalım:

Vuex ile ilgili öğrenilecek çok şey var, biz bu yazıyla bu konuya ufak bir giriş yapmış olduk.

Sorularınızı ve yorumlarınızı bekliyorum.

 

 

 

“Vue.js (5) : Bileşenlerin Birbiriyle Haberleşmesi ve Vuex” üzerine 7 yorum

Yorum yapın