Vue ile en az üç yıldır çalışıyorum ve en başından beri uygulamalarımdaki ortak durumu kontrol etmek için Vuex kullanıyorum çünkü bu resmi ve temel destekli bir özellik. Büyük uygulamalar için, kodu merkezileştirilmiş, organize edilmiş ve tüm ekip için anlaşılabilir tutmak için Vuex gibi bir çözüm kullanmak tamamen mantıklıdır. Ancak daha küçük uygulamalar için, bana her zaman sadece az miktarda veriyi kontrol etmek için çok fazla kod (durum, eylem, mutasyonlar, alıcılar) yazmanız gerektiği görüldü.
Sonuç olarak, durum yalnızca bileşenleriniz arasında paylaşılan bir nesnedir, değil mi? Yani belki çözümümüzü durum nesnesini dışa aktaran bir JavaScript dosyasıyla yazmaya başlayabiliriz:
// store.js const state = { counter: 1 }; export default state;
Bu noktaya kadar, biz iyiyiz. Peki ya mağaza değerini böyle bir yöntem kullanarak güncellemek istersek?
,methods: { increment() { store.counter ++ } }
Bu sorunu çözmek için, Kendi JavaScript Durum Yönetim Kitaplığınızı Yazın adlı
pubsub makalemde anlattığım kalıp gibi bir şey uygulayabilir veya RxJS gibi bazı kitaplıkların yardımıyla gözlemlenebilirleri kullanmaya çalışabiliriz . Gözlemlenebilirler, sorunu çözmenin çok daha modern ve özlü bir yolu gibi görünüyor, ancak her iki durumda da, çok daha fazla kod yazmamız veya bazı harici kitaplıkları kullanmamız gerekecek ki bu, daha küçük uygulamalar için daha uygun bir çözüm olmayabilir.
Arayüzümüzle ilgilenmek için zaten Vue kullandığımızdan,
Vue.observableküçük mağazamızı reaktif hale getirmek için API işlevini kullanabiliriz. Vue'nun belgelerinde açıklandığı gibi :
"Vue.observable, bir nesneyi reaktif hale getiriyor. Dahili olarak, Vue bunu
dataişlev tarafından döndürülen nesnede kullanır .
Döndürülen nesne, doğrudan işleme işlevleri ve hesaplanan özellikler içinde kullanılabilir ve değiştirildiğinde uygun güncellemeleri tetikler. Ayrıca basit senaryolar için minimal, bileşenler arası durum deposu olarak da kullanılabilir. "
Davamız için mükemmel bir uyum gibi görünüyor. Şimdi mağazamız şöyle görünecek:
// store.js import Vue from 'vue'; const state = Vue.observable({ counter : 1}) export default state;
Bunu yaparak, bileşenlerimizi içe aktaracak şekilde güncelleyebilir ve kullanıcı arayüzümüz ile mağaza durumu arasındaki etkileşimi sağlamak için düğmeler ekleyebiliriz:
Şimdi küçük reaktif, karmaşık olmayan mağazamız ve bileşenimiz iş mantığından ayrıştırılmış durumda.
Burada kullanılan kod CodeSandbox'ta mevcuttur , böylece kendiniz test edebilirsiniz.
Bu projenin çok fazla kodu olduğunu ve yerel eyaletin yeterli olacağını düşünüyor olabilirsiniz ve ben de katılıyorum. Bu örnek, daha önce de söylediğim gibi, durumu ebeveyn-çocuk olmayan ilişkiler arasında paylaşmanız gereken ve yüksek dereceli bileşenleri kullanmak veya birden çok seviye arasında sahne ve olayları geçirmek istemediğiniz durumlar için daha uygundur. Bu, uygulamayı bir çırpıda basitten çok karmaşık hale getirebilir.
Son bir not: Bu örnek, Vuex'in güç merkezi veya tüm projelerde Vuex'in yerini alması anlamına gelmez. Güçlü özellikler gerektiren büyük bir proje için, Vuex veya benzeri bir çözüm kullanmalısınız.
Umarım bu makaleyi beğenmişsindir. Bir sonrakinde görüşürüz.
Teknoloji dünyasında, işletmeler sürekli olarak siber suçluların şeytani faaliyetlerinin tuzağına düşme riski altındadır. Endişe verici derecede sık hale gelen böyle bir taktik, kimlik bilgilerini doldurmaktır.
Gündem: Giriş: TL; Ama okuyabilirim: A / B testi, CloudFront ve Lamba @ edge hakkında zaten bilginiz varsa, AWS Lambda @ edge ile doğrudan A / B testine gidin. A / B testi nedir? A / B testi, kullanıcıların bir web sitesinin iki farklı versiyonunun katılımını karşılaştırmaya odaklanan bir UX araştırma metodolojisidir.
Bugün AppStore'daki birçok uygulama, tablo görünümünü kaydırırken içeriği tablo görünümü başlığındaki ölçekleme gibi davranışlara sahiptir. Bu tür davranışlara nasıl ulaşabileceğimizin en basit yaklaşımını size göstereceğim.
İlk blogumda söz verdiğim gibi 'DOM Nedir?' burada 'DOM işleme' üzerine bir blog var. Bu blogda DOM'a daha fazla dalacağız ve DOM işlemenin ne olduğunu ve nasıl yapıldığını öğreneceğiz.
Node.js'de akışların nasıl çalıştığını hiç merak ettiniz mi? Sahiptim.