Vue.js'de Bileşenler Arasında Veri Nasıl Geçilir?

Bileşenler arasında veri paylaşımı, VueJS'nin temel işlevlerinden biridir. Daha modüler bir proje tasarlamanıza, veri kapsamlarını kontrol etmenize ve uygulamanız genelinde doğal bir veri akışı oluşturmanıza olanak tanır.

Vue uygulamanızın tamamını tek bir bileşende oluşturmadığınız sürece (ki bu hiçbir anlam ifade etmez), bileşenler arasında veri paylaşmanız gereken durumlarla karşılaşacaksınız.

Bu öğreticinin sonunda, bunu yapmanın üç yolunu öğreneceksiniz.

• Ebeveynden çocuğa veri paylaşmak için sahne kullanma,
• Çocuktan ebeveyne veri paylaşmak için özel olaylar yayan,
• Uygulama düzeyinde paylaşılan bir durum oluşturmak için Vuex'i kullanma.

Tamam - hemen konuya girelim!

1. Ebeveynden Çocuğa Verileri Paylaşmak İçin Props Kullanma

VueJS aksesuarlar, bileşenler arasında veri paylaşmanın en basit yoludur. Aksesuarlar, bir bileşene verebileceğimiz özel niteliklerdir. Ardından, şablonumuzda bu özniteliklere değerler verebiliriz ve — BAM — bir üst öğeden bir alt bileşene veri aktarıyoruz!

Örneğin, bir kullanıcı profili sayfası üzerinde çalıştığımızı ve bir alt bileşenin bir kullanıcı adı desteğini kabul etmesini istediğimizi varsayalım. İki bileşene ihtiyacımız olacak.

1. Prop'u kabul eden alt bileşen, buna AccountInfo.vue .
2. Prop'u geçen ana bileşen, buna ProfilePage.vue diyelim.

AccountInfo.vue içinde, props seçeneğini kullanarak kabul ettiği props'ları bildirebiliriz. Yani bileşen seçeneklerinin içinde aşağıdaki gibi görünmesini sağlayalım.

 // AccountInfo.vue <template> <div id='account-info'> {{username}} </div> </template> <script> export default { props: ['username'] } </script>

Ardından, üst öğeden ( ProfilePage.vue ) verileri gerçekten geçirmek için, onu özel bir öznitelik gibi iletiriz.

 // ProfilePage.vue <account-info username='matt' />

Şimdi sayfamızı AccountInfo bileşenimizin ebeveyni tarafından iletilen değeri düzgün bir şekilde oluşturduğunu görebiliriz.

Diğer VueJS yönergeleriyle çalışırken olduğu gibi, sahne öğelerini dinamik olarak geçmek için v-bind kullanabiliriz. Örneğin, kullanıcı adı prop'unu bir değişkene eşit olacak şekilde ayarlamak istediğimizi varsayalım. Bunu v-bind yönergesi (veya kısaca : için kısayol kullanarak başarabiliriz. Kod biraz şöyle görünecek:

 <template> <div> <account-info :username="user.username" /> </div> </template> <script> import AccountInfo from "@/components/AccountInfo.vue"; export default { components: { AccountInfo }, data() { return { user: { username: 'matt' } } } } </script>

Bu, verilerimizi değiştirebileceğimiz ve bu değeri kullanan herhangi bir alt öğenin de güncelleneceği anlamına gelir.

İpucu: Donanımlarınızı Daima Doğrulayın

Daha net bir Vue kodu yazmak istiyorsanız, önemli bir teknik, aksesuarlarınızı doğrulamaktır. Kısacası bu, prop'unuz için gereksinimleri belirlemeniz gerektiği anlamına gelir (örn. tip, format vb.). Bu gereksinimlerden biri karşılanmazsa (örneğin, pervane yanlış bir tip iletilirse), Vue bir uyarı yazdırır.

Diyelim ki kullanıcı adı desteğimizin yalnızca Dizeleri kabul etmesini istiyoruz. Props nesnemizi şöyle görünecek şekilde değiştirmemiz gerekecek:

 export default { props: { username: String } }

Büyük ölçekli Vue uygulamalarında çalışırken veya eklentiler tasarlarken aksesuarların doğrulanması çok önemlidir. Herkesin aynı sayfada olmasını ve sahne donanımlarını amaçlandığı şekilde kullanmasını sağlamaya yardımcı olur.

Aksesuarlara ekleyebileceğimiz doğrulamaların tam listesi için, ayrıntılı bir inceleme için resmi belgelere göz atmanızı kesinlikle tavsiye ederim.

İpucu: Nesne Adlandırma Kurallarını Takip Edin

VueJS stil kılavuzuna göre, sahne malzemelerinizi adlandırmanın en iyi yolu, bunları betiğinizde bildirirken camelCase ve şablon kodunda bunlara atıfta bulunurken kebab-case kullanmaktır.

Bunun arkasındaki mantık aslında oldukça basittir. Javascript'te camelCase standart adlandırma kuralıdır ve HTML'de kebap durumudur.

Bu nedenle Vue, her dilin normlarına bağlı kalmamızı önerir. Neyse ki, Vue iki stil arasında otomatik olarak dönüşüm yapabiliyor, böylece geliştiriciler için ek kurulum yok.

 // GOOD <account-info :my-username="user.username" /> props: { myUsername: String } // BAD <account-info :myUsername="user.username" /> props: { "my-username": String }

2. Çocuktan Ebeveyne Verileri Paylaşmak İçin Olaylar Yayımlamak

Artık hiyerarşiden geçen verilerimiz olduğuna göre, bunu diğer yoldan geçirelim: bir alt bileşenden bir ebeveyne. Sahne kullanamayız, ancak özel olaylar ve dinleyiciler kullanabiliriz.

Her Vue örneği, bir olayı tetikleyen bir .$emit(eventName) yöntemini çağırabilir. Ardından, v-on yönergesini kullanarak bu olayı diğerleriyle aynı şekilde dinleyebiliriz.

Özel Etkinlik Oluşturma

Kullanıcı adını değiştiren bir düğme ekleyerek kullanıcı profili örneğimizi oluşturalım. Alt bileşenimizin içinde ( AccountInfo.vue ) butonunu oluşturalım.

Daha sonra bu butona tıklandığında changeUsername adında bir olay yayacağız.

 <template> <div id='account-info'> <button @click='changeUsername()'>Change Username</button> {{username}} </div> </template> <script> export default { props: { username: String }, methods: { changeUsername() { this.$emit('changeUsername') } } } </script>

Ebeveynin içinde bu olayı işliyoruz ve user.username değişkenini değiştiriyoruz. Daha önce tartıştığımız gibi, v-on yönergesini veya kısaca "@" kullanarak olayları dinleyebiliriz.

 <template> <div> <account-info :username="user.username" @changeUsername="user.username = 'new name'"/> </div> </template>

Deneyelim. Düğmeye tıkladığınızda kullanıcı adının "yeni ad" olarak değiştiğini görmelisiniz.

İpucu: Özel Etkinlikler Bağımsız Değişkenleri Kabul Edebilir

Olaylarınıza argümanları iletmek için en yaygın kullanım durumu, bir alt bileşenin prop için belirli bir değer ayarlayabilmesini istediğiniz zamandır. Bir pervanenin değerini asla bileşenin kendisinden doğrudan düzenlemek istemezsiniz.

Ancak neyse ki, ana bileşenin değerlerini değiştirmek için özel olaylarımızla geçiş argümanlarını kullanabiliriz.

Bir değer geçirebilmek için changeUsername olayını değiştirmek istediğimizi varsayalım.

$emit yöntemi, bağımsız değişkenler için isteğe bağlı ikinci bir parametre alır. Bu yüzden tek yaptığımız, etkinliğimizin adından sonra yeni kullanıcı adı değerimizi eklemek.

 this.$emit('changeUsername', 'mattmaribojoc')

Ardından, ana bileşenimizde, özel bir $event değişkeni kullanarak bu değerlere inline erişebilir veya parametre alan bir işleyici yöntemi yazabiliriz.

 <account-info :username="user.username" @changeUsername="user.username = $event"/> OR <account-info :username="user.username" @changeUsername="changeUsername($event)"/> export default { ... methods: { changeUsername (username) { this.user.username = username; } } }

3. Uygulama Düzeyinde Paylaşılan Durum Oluşturmak için Vuex'i Kullanma

Tamam - ebeveynler/çocuklar arasında nasıl veri paylaşılacağını biliyoruz, peki ya diğer bileşenler? Verileri iletmek istiyorsak son derece karmaşık bir hiyerarşi sistemi mi oluşturmamız gerekiyor?

Neyse ki değil. Harika Vuex durum yönetimi kitaplığı, geliştiricilerin hayatlarını yıllardır kolaylaştırıyor. Kısacası, tüm bileşenlerin erişebildiği merkezi bir veri deposu oluşturur.

Daha önce kullandığımız yöntemlerde (props / emitting eventler), her bileşenin daha sonra bileşenler arasında paylaştığımız kendi veri durumu vardır. Ancak Vuex, paylaşılan tüm verileri her bileşenin kolayca erişebileceği tek bir duruma çıkarmamıza izin verir. Bu paylaşılan duruma mağaza denir.

Deneyelim.

Vuex, Vue'nin çekirdek kodundan ayrı olduğu için, önce onu projemize yüklememiz ve içe aktarmamız gerekecek. İlk olarak, CLI projemizin içinde npm install vuex --save çalıştırmamız gerekecek.

Ardından, aşağıdaki kodu içeren bir index.js dosyasıyla bir src/store klasörü oluşturun.

 // store/index.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {} });

Bunu kök Vue örneğimize dahil etmek için, store/index.js dosyamızı içe aktarmamız ve Vue kurucumuza geçirmemiz gerekiyor.

 // main.js import store from "./store"; new Vue({ store, ...

Vue Store Inside Bileşenlerine Erişme

Vuex mağazamızı kök Vue örneğimize eklediğimiz için, kökün tüm çocuklarına enjekte edilir. Mağazaya bir bileşenden erişmek istiyorsak, this.$store aracılığıyla yapabiliriz.

Şimdi, bir Vuec mağazasının dört bölümünün her birinin özelliklerine dalalım.

1. Devlet

Vuex durumu, uygulama düzeyinde veriler içeren bir nesnedir. Tüm Vue örnekleri bu verilere erişebilecek.

Mağazamız için, biraz daha kullanıcı profili verisi depolayan bir kullanıcı nesnesi oluşturalım.

 export default new Vuex.Store({ state: { user: { username: 'matt', fullName: 'Matt Maribojoc' } }, getters: {}, mutations: {}, actions: {} });

Bu verilere, bunun gibi herhangi bir örnek bileşeni içinde erişebiliriz.

 mounted () { console.log(this.$store.state.user.username); },

2. Alıcılar

Durum verilerinin değiştirilmiş bir değerini döndürmek için Vuex alıcılarını kullanırız. Alıcıları düşünmenin iyi bir yolu, onlara hesaplanmış özellikler gibi davranmaktır. Örneğin, hesaplanan özellikler gibi alıcılar sonuçlarını önbelleğe alır ve yalnızca bir bağımlılık değiştirildiğinde yeniden değerlendirir.

Önceki mağazamızı temel alarak, tam ad özniteliğine dayalı olarak bir kullanıcının adını döndüren bir yöntem yapmak istediğimizi varsayalım.

 getters: { firstName: state => { return state.user.fullName.split(' ')[0] } }

Vuex alıcı özellikleri, store.getters nesnesindeki bileşenler için kullanılabilir.

 mounted () { console.log(this.$store.getters.firstName); }

İpucu: Varsayılan Alıcı Bağımsız Değişkenlerini Bilin

Varsayılan olarak, Vuex alıcıları iki bağımsız değişkeni kabul eder.

1. durum — uygulamamız için durum nesnesi;
2. alıcılar — store.getters nesnesi, yani mağazamızdaki diğer alıcıları arayabiliriz.

Bildirdiğiniz her alıcı ilk durum argümanını gerektirecektir. Ve kodunuzu nasıl tasarladığınıza bağlı olarak, alıcılarınız ikinci 'alıcı' argümanını kullanarak birbirlerine referans verebilirler.

Tam ad durumu özelliğimizden ad değerimizi basitçe kaldıran bir soyadı alıcı yapalım. Bu örnek, hem durum hem de alıcı nesneleri gerektirir.

 lastName (state, getters) { return state.user.fullName.replace(getters.firstName, ''); }

İpucu: Özel Argümanları Vuex Getters'a iletin

Alıcıların bir başka harika özelliği de, alıcımızın bir yöntem döndürmesini sağlayarak onlara özel argümanlar iletebilmemizdir.

 prefixedName: (state, getters) => (prefix) => { return prefix + getters.lastName; } // in our component console.log(this.$store.getters.prefixedName("Mr."));

3. Mutasyonlar

Mutasyonlar, durum nesnesinin değerini uygun şekilde değiştirmenin tek yoludur. Unutulmaması gereken önemli bir ayrıntı, mutasyonların senkronize olması gerektiğidir .

Alıcılar gibi, mutasyonlar da her zaman Vuex durum özelliğini ilk argümanları olarak kabul eder. Ayrıca, ikinci argüman olarak yük adı verilen özel bir argümanı kabul ederler.

Örneğin, bir kullanıcının adını belirli bir değere değiştirmek için bir mutasyon yapalım.

 mutations: { changeName (state, payload) { state.user.fullName = payload } },

Ardından, ikinci argüman olarak store.commit yöntemini kullanarak bu yöntemi bileşenimizden çağırabiliriz.

 this.$store.commit("changeName", "New Name");

Çoğu zaman, yükünüzün bir nesne olmasını isteyeceksiniz. Bu sadece bir mutasyona birkaç argüman iletebileceğiniz anlamına gelmez, aynı zamanda nesnenizdeki özellik adları nedeniyle kodunuzu daha okunabilir hale getirir.

 changeName (state, payload) { state.user.fullName = payload.newName }

Yüklü mutasyonları çağırmanın iki farklı yolu vardır.

1. İlk argüman olarak mutasyon tipine ve ikinci argüman olarak yüke sahip olabilirsiniz.
2. Tür için bir özellik ve yük için başka bir özellik ile tek bir nesne geçişini bildirebilirsiniz.

 this.$store.commit("changeName", { newName: "New Name 1", }); // or this.$store.commit({ type: "changeName", newName: "New Name 2" });

İkisinin nasıl çalıştığı arasında gerçek bir fark yok, bu yüzden tamamen kişisel tercihe bağlı. Tüm projeniz boyunca tutarlı olmanın her zaman en iyisi olduğunu unutmayın, bu nedenle hangisini seçerseniz seçin, ona bağlı kalın!

4. Eylemler

Vuex'te eylemler, durumu değiştirmek için kullandığımız için mutasyonlara oldukça benzer. Ancak, eylemler değerlerin kendisini değiştirmez. Bunun yerine, eylemler mutasyonlar gerçekleştirir.

Ayrıca, Vuex mutasyonlarının eşzamanlı olması gerekirken, eylemler böyle değildir. Eylemleri kullanarak, örneğin bir API çağrısından sonra bir mutasyon çağırabiliriz.

Gördüğümüz Vuex işleyicilerinin çoğu ana parametre olarak durumu kabul ederken, eylemler bir bağlam nesnesini kabul eder. Bu bağlam nesnesi, Vuex mağazamızdaki özelliklere erişmemizi sağlar (örn. durum, taahhüt, alıcılar).

İşte iki saniye bekleyen ve ardından changeName mutasyonunu gerçekleştiren bir Vuex eylemi örneği.

 actions: { changeName (context, payload) { setTimeout(() => { context.commit("changeName", payload); }, 2000); } }

Bileşenlerimizin içinde, fonksiyonumuzu çalıştırmak için store.dispatch yöntemini kullanıyoruz. Mutasyonlarda yaptığımız gibi argümanları iletiyoruz. Türü bildiririz ve herhangi bir özel argümanı ikinci argümana iletiriz.

 this.$store.dispatch("changeName", { newName: "New Name from Action" });

Toplama

Şimdi, VueJS'deki bileşenler arasında veri paylaşmanın üç farklı yolunu bilmelisiniz: aksesuarlar, özel etkinlikler ve bir Vuex mağazası.

Umarım bu eğitim size bazı farklı Vue yöntemleri ve en iyi uygulamalar hakkında daha fazla fikir vermesine yardımcı olmuştur. Bunları projelerinize nasıl uyguladığınızı bana bildirin!

Daha fazla okuma

Her tekniğin teknik yönüne/yeteneklerine daha da derinlemesine girmekle ilgileniyorsanız, burada başlamak için harika yerler var.

• Vuex Resmi Kılavuz web sitesi
• Aksesuarlar ve Özel Etkinlikler için VueJS Belgeleri
• “WTF, Vuex mi? Vue'nin Uygulama Veri Deposu İçin Yeni Başlayanlar Kılavuzu,” Anthony Gore, Vue.js Developers