Büyücülerin Dostu "Pinia"

Nedir bu Pinia ?

Pinia bir state management kütüphanesidir çok açıklayacı olmadı farkındayım aşağıda detaylarına değineceğim.

 

Her Şeyin Başı State

State, uygulama içinde kullanacağımız veriyi ifade eder. Normalde, bir proje içinde kullandığımız veriler, kendi bileşenleri etrafında sınırlıdır. Bu verilerin dışarıya çıkması ve iletişim kurması için klasik yöntemler olarak Props ve Emit işlemlerini kullanabiliriz. Ancak bunları kullanmanın proje geliştiricileri için bazı dezavantajları vardır.

Props Drilling Hell

Veriler dış dünyayla iletişim kurabilmektedir, ancak bu işlem her bileşenin birbiriyle doğrudan iletişim kurması anlamına gelmez. VueJS'in yapısı, veri akışının sıralı ve kademe kademe ilerlemesi gerektiğini belirtir. Bu da bir ebeveyn bileşenin en fazla birinci çocuk bileşene veri iletebileceği anlamına gelir. İkinci bir çocuğa veri aktarmak istendiğinde, aynı işlemlerin tekrarlanması gerekir. Bu süreç sonsuza kadar devam edebilir, ancak bu kullanışlı değildir çünkü belirli bir noktadan sonra verilerin kaynağını unutabilirsiniz ve büyük bir kargaşaya neden olabilir.

 

Çözüm Olarak Pinia (Global State Management)

Bu durumun önüne geçmek ve verilerin izlenmesini kolaylaştırmak için Global State Management yöntemleri bulunmaktadır. Bu yöntem, verilerin bir merkezde toplanmasını ve ihtiyaç duyulduğunda ilgili bileşen içinde doğrudan çağrılmasını amaçlar, böylece verilerin bileşenler arasında dolaşmasını önler.

 

 

Pinia Nasıl Kullanılır ?

Mevcut projemize Pinia kütüphanesini ekleyerek başlayabiliriz. (Ben package manager olarak yarn'ı baz aldım siz istediğinizi kullanabilirsiniz)

Aşağıdaki örnekte, bir Pinia store örneği oluşturduk ve bu store'u uygulamamızın herhangi bir yerinde kullanabiliriz.

Kullanmak istediğimiz veriler topluluğuna bir isim verip bunun store'unu oluşturabiliriz. örnek olması açısından bir sayaç uygulamasını baz alabiliriz. (çok yaratıcı)

Daha sonrasında bu useCounterStore'a erişip bunu ilgili componentlerimizde kullanabiliriz.

 

Sonuç Olarak

Pinia gerçekten güzel bir kütüphane! Vue.js uygulamalarında state yönetimini yapmayı o kadar kolaylaştırıyor ki, bir kez kullandıktan sonra geri dönmek istemeyeceksiniz. Prop drilling gibi can sıkıcı sorunları unutturuyor ve kodlarınızı daha temiz ve düzenli hale getiriyor.

Bu makalede, Pinia kullanarak Vue.js'te state yönetimini nasıl geliştirebileceğimizi inceledik. Gördük ki, Pinia sayesinde global state'i etkili bir şekilde yönetmek mümkün. Hem de bunu yapmak o kadar kolay ki, artık eskisi gibi veri aktarımı için saatler harcamaya gerek yok!

Yazımı okuduğunuz için teşekkür ederim, iyi kodlamalar dilerim! Sonraki makalelerde görüşmek üzere.

 

Yavuz Selim Şerifoğlu

Frontend Developer