Pinia'yı Anlamak Vue.js Uygulamalarında State Management

İstanbul Javascript Topluluğu
19.12.2025 - Youtube

Transcript

1. Pinia'yı Anlamak: Vue.js Uygulamalarında State Management MERT METİN
2. MERT METİN Senior Software Engineer Blogger, speaker mrtmtn _mertmetin https://mertmtn.blogspot.com mertmtn
3. Agenda Vue.js’te State Management Pinia ve Vuex Karşılaştırılması? Pinia’nın Öne Çıkan Özellikleri Pinia Temel Konseptleri Kurulum Yöntemleri Örnek Kod Gösterimi
4. Vue.js State Management Veri Akışı, Global State
5. Vue.js Veri Yönetimi Props vs Emits
7. Global State
8. Pinia ve Vuex Karşılaştırılması Pinia, resmi state management çözümü, Vuex bakım modundadır. Pinia, modern bir API sunarak daha kolay kullanım sağlar. Pinia’da yaygınlaşan bir indirme ve kullanım söz konusudur. Pinia, Vuex’e göre daha dar bir öğrenme kaynağına sahiptir. Vuex’ten Pinia’ya migration gerektirir.
9. Pinia ve Vuex Karşılaştırması Pinia, Composition API ile uyumlu çalışır. Pinia, daha az boilerplate kod gerektirir. Vuex, daha ayrıntılıdır. Vuex - mutations => Pinia - actions or state, Pinia, hot reload değişikliği destekler.
10. vuex vs pinia
11. vuex klasör yapısı
12. pinia klasör yapısı
13. Pinia’nın Öne Çıkan Özellikleri
14. Hafiflik - Extremely Light Projeye eklenmesi kolaydır. Tasarımı gereğince boyutu küçüktür. (yaklaşık 1-1.5 kB) Hız ve verimlilik için uygundur. Performans ve yükleme açısından avantaj sağlayabilir.
15. Devtools Support Stateleri debug edebilmek için DevTools entegrasyon imkanı sunar. Componentlerde kullanılan storeleri gösterir. State ve metotlardaki değişikliklerin takip edilmesini kolaylaştırır. Basit bir arayüz sunar.
16. Vue Extension with Pinia Devtools
17. Intuitive Kolay öğrenme imkanı sunar. Vue component yapısına benzer. Store oluşturmak, component oluşturmak kadar kolay.
18. Modüler Tasarım Küçük ve bağımsız “store”ler oluşturma imkanı Gerektiğinde import edilebilir. Kodları bölme, yönetme ve organizasyonu kolaylaştırır.
19. Extensible “Cross cutting concern”lerle genişletmek Local storage, API Cache, Feature Flag, Authorization
20. Type Safe Typescript desteği sunar. Tip çıkarımı yapabilmek kolaydır. (Auto inference) Manuel bir şekilde her bir tip için tanımlama yapmaya gerek yok.
21. Pinia Temel Konseptler Store, State, Getters, Actions
22. Stores Temel iş mantığı ve state yapılarını tutan bloklardır. Store’ler isimlere sahiptir ve farklı componenetlerden çağrılabilir.
23. Defining a store İPUCU ‘use’ ve ‘store’ arasına store’nin tekil id adının eklenmesi id: file için store değişkeninin ismi useFileStore olmalıdır.
24. Setup Store Vue Composition API mantığına benzer. Karmaşık iş kuralları varsa tercih edilebilir.
25. Option Store Vue Options API mantığına benzer. Basit CRUD ve state yönetimi için kullanışlıdır.
26. Store Bileşenleri
27. State Uygulamada kullanılan verilerdir. Bütün componentler tarafından çağrılabilir veya değiştirilebilir. Reaktiftir.
28. State - CounterStore
29. Getters Statelerdeki alanlardan hesaplanıp türetilmektedir. Veri yönetimi ve erişimi açısından faydalıdır. Başka store içerisindeki getters yapıları tarafından ulaşılabilir.
30. Getters - CounterStore
31. Actions İş kurallarının tanımlandığı alandır. Mutasyon süreci olmadan doğrudan stateleri değiştirebiliyor. Asenkron çağrılar yapılabilir.
32. Actions - CounterStore
33. Using the store
34. Pinia Kurulum Yöntemleri Mevcut veya Yeni Proje
35. vite+vue / add pinia
36. adding pinia on the existing project
37. main.js - configured pinia
38. HMR (Hot Module Replacement) Store’de yapılan değişikliği sayfayı yenilemeye gerek kalmadan doğrudan tarayıcıya yansıtılmasını sağlayan bir mekanizmadır.
39. Örnek Kod Gösterimi
40. Pinia’ya Geçmeli Miyim? Yeni bir Vue projesi geliştiriyorsan Evet, Pinia kullanmalısın. Daha modern, daha sade, Vue 3 ile uyumludur. Vuex kullanan bir projeyi hâlâ aktif geliştiriyorsan Yeni özellikler ekliyorsan, mimariyi yeniliyorsan Evet, Pinia'ya geçmeyi düşünebilirsin. Vuex kullanan bir projede sadece bakım yapıyorsan Yeni geliştirme neredeyse yoksa Hayır, Pinia'ya geçmen şart değil.
41. Özet 🏆Pinia Kazanır Pinia, Vuex'in yerini alan resmi Vue state management kütüphanesi, Kb seviyesinde paket yükleme boyutu, Daha iyi TypeScript desteği, State değişikliklerinde mutasyon gerektirmemesi, Composition API entegrasyonu, Devtools desteği, Kullanımın yaygınlaşması
42. Teşekkürler