Pinia Nedir?
Vue 3 Projelerinde State Management Rehberi
Vue Projeleri Büyüdükçe State Yönetimi Neden Kritikleşir?
Bir Vue projesi ilk başta “basit” görünür: birkaç bileşen, birkaç form, birkaç API çağrısı… Ancak uygulama büyüdükçe aynı veriyi birden fazla yerde kullanma ihtiyacı kaçınılmaz olur. Kullanıcı oturumu, yetkiler, sepet, filtreler, tema/dil seçimi, bildirimler ve sayfalar arası paylaşılan veriler derken; state yönetimi doğru tasarlanmadığında proje kısa sürede zor bakım yapılan bir hale gelebilir.
Bu noktada iki senaryo sık görülür:
- Veri tutarsızlaşır: Aynı bilgi farklı bileşenlerde ayrı ayrı tutulur ve zamanla birbirini tutmaz.
- İş mantığı dağılır: API çağrıları ve kurallar UI katmanına yayıldıkça “nerede ne oluyor?” sorusu artar.
İşte Pinia, bu problemleri çözmek için Vue 3 dünyasında en çok tercih edilen yaklaşımlardan biridir. Bu rehberde Pinia’yı sadece tanımlamakla kalmayıp, neden gerekli olduğunu, hangi sorunları çözdüğünü ve Vuex’e göre pratik farklarını net bir şekilde ele alacağız.
İçindekiler
Pinia Nedir?
Pinia, Vue uygulamalarında “paylaşılan durum”u (shared state) yönetmek için kullanılan modern bir state management çözümüdür. Vue 3’ün Composition API yaklaşımıyla doğal biçimde uyumludur ve store’ları (durum depolarını) modüler şekilde tanımlamanıza imkân verir.
State Management Ne Demek?
State management; kullanıcı oturumu, sepet, yetkiler, filtreler, tema/dil seçimi gibi uygulama genelinde birden fazla bileşenin ihtiyaç duyduğu verilerin tek bir “kaynak noktadan” yönetilmesidir. Bu sayede:
- Aynı veri farklı yerlerde “kopyalanıp” tutarsızlaşmaz.
- Verinin nasıl değiştiği (iş kuralları) belli bir yerde toplanır.
- Debug ve bakım süreci hızlanır.
Pinia’nın Temel Kavramları
- Store: Belirli bir domain’e ait state + getters + actions bütünü (ör. auth, cart, settings).
- State: Kaynak veri (örn. token, user, items).
- Getters: State’ten türetilen okunur değerler (örn. isLoggedIn, cartTotal).
- Actions: İş mantığı ve state güncellemeleri (örn. login, API çağrısı, sepete ekleme).
Pinia Ne Zaman Tercih Edilmeli?
- Birden fazla sayfa/bileşen aynı veriyi kullanıyorsa: ör. kullanıcı bilgisi, yetkiler, sepet.
- Veri akışı karmaşıklaştıysa: “prop drilling” veya event zincirleri artıyorsa.
- İş mantığı dağılmaya başladıysa: API çağrıları ve kurallar birçok bileşene saçıldıysa.
Pinia Her Zaman Şart Mı?
Hayır. Çok küçük bir uygulamada veya sadece tek bir sayfayı ilgilendiren local state’lerde (sadece o bileşen içinde yaşayan veriler) Pinia kullanmak gereksiz olabilir. Ancak proje büyüme eğilimindeyse erken dönemde Pinia’ya geçmek, ileride refactor yükünü azaltır.
Pinia Ne İşe Yarar?
Uygulama büyüdükçe state yönetimi genelde şu problemleri doğurur: aynı verinin farklı yerlerde tutulması, props’ların katmanlar boyunca taşınması (prop drilling), bileşenler arası karmaşık event iletişimi ve iş kurallarının UI katmanına karışması. Pinia bu problemleri sistematik şekilde azaltır.
1- Tek kaynaktan doğruluk (Single Source of Truth)
Örneğin “kullanıcı giriş yaptı mı?” bilgisi; header, profil sayfası, yetki kontrolleri, menü ve API istekleri tarafından kullanılabilir. Pinia ile bu bilgi auth store’da tek yerde durur. Böylece:
- Farklı bileşenler farklı “login state” üretmez.
- Değişikliklerin etkisi daha öngörülebilir olur.
2) İş mantığını (actions) merkezileştirir
API çağrıları, doğrulama kuralları, dönüşüm işlemleri (DTO → UI model) gibi işler bileşenlere dağıldığında bakım zorlaşır. Pinia actions ile bu işleri store’a taşıyarak UI’yı sadeleştirir.
- Daha okunabilir bileşenler: Bileşen “ne yapılacağını” söyler, “nasıl yapılacağını” store yönetir.
- Daha iyi test edilebilirlik: UI render etmeden action’ları test etmek kolaylaşır.
3) Türetilmiş verileri getters ile düzenler
Filtrelenmiş liste, toplam tutar, görünürlük kuralları gibi hesaplamalar bileşende çoğaldığında tekrar ve hata riski artar. Getters, bu hesapları tek noktada toplar.
4) Takım ölçeğinde modülerlik sağlar
Pinia’da her store bir domain’i temsil edebilir. Örneğin cart, orders, warehouse gibi. Bu yaklaşım:
- Kod sahipliğini (ownership) netleştirir.
- Büyük refactor’ları daha kontrollü hale getirir.
5) Debug ve izlenebilirlik (Devtools)
Store değişikliklerini adım adım görmek, hangi action’ın hangi state’i değiştirdiğini takip etmek hataları daha hızlı bulmanızı sağlar. Özellikle “ara sıra olan” bug’larda devtools kayıtları çok işe yarar.
Pinia ile Vuex Arasındaki Farklar Nelerdir?
Pinia genellikle “Vuex’in modern alternatifi” olarak konumlanır. İkisi de state management çözer; ancak Pinia, daha sade bir API ve daha iyi TypeScript deneyimi hedefler.
Özet farklar;
- Mutation zorunluluğu: Vuex’te çoğu yapıda state değişimi mutation üzerinden yapılır. Pinia’da action içinde state’i doğrudan güncelleyebilirsiniz (daha az katman).
- Daha az boilerplate: Vuex pattern’lerinde (actions/mutations/types) dosya ve kod tekrarı artabilir. Pinia daha kısa ve okunur kalır.
- TypeScript deneyimi: Pinia tip çıkarımı genelde daha “doğal” akar; store kullanımında daha az manuel tip gerekir.
- Modüler yapı: Pinia’da store’lar domain bazlı bölünmeye daha yatkındır; “tek büyük store” yaklaşımı yerine çoklu store normaldir.
En İyi Uygulamalar
- Store’ları şişirmeyin: Çok büyük tek store yerine domain’lere bölün.
- Action isimlerini net tutun: fetchMe, login, logout gibi.
- Side-effect yönetimi: API çağrılarını store’da toplayın; bileşende sadece tetikleyin.
- Loading ve error state: UX için kritik; her önemli akışta takip edin.
- Getters performansı: Ağır hesaplamaları gereksiz tetiklemeyin, gerektiğinde parçalayın.
Pinia ile Vue 3 Projelerinde Daha Sürdürülebilir State Yönetimi
Özetle Pinia, Vue 3 projelerinde state yönetimini sadeleştiren, iş mantığını tek bir yerde toplayarak kodun okunabilirliğini ve sürdürülebilirliğini artıran modern bir çözümdür. Doğru kurgulandığında; hem küçük projelerde düzen sağlar hem de büyük uygulamalarda ölçeklenebilir bir mimarinin temelini oluşturur.
Bu rehberde ele aldığımız yaklaşımı uygularken şu 3 prensibi aklınızda tutun:
- Domain bazlı store tasarımı: auth, cart, settings gibi net sorumluluklar.
- UI’yı sade tutma: API çağrıları ve iş kurallarını mümkün olduğunca store actions’a taşıma.
- Kalıcı state’te doğru strateji: Persist ihtiyacını güvenlik ve UX dengesine göre belirleme.
Bir sonraki adım olarak, projenizde en çok “tekrar edilen” veya “birden fazla yerde kullanılan” veriyi seçip (ör. kullanıcı oturumu), küçük bir Pinia store ile başlayın. Bu küçük başlangıç bile kısa sürede kod kalitesindeki farkı hissettirir.
