Pinia Nedir?
Pinia, vuex’ e alternatif olarak gelen state yönetim kütüphanesidir. Composition API ile uyumlu olarak çalışır ve boyut olarak çok küçük (1KB) bir yer kaplar. Böyle olması sebebiyle gayet hızlıdır. Ayrıyeten store yapılarını bağımsız olarak kullanabiliriz. Bu şekilde store dosyalarımızı daha iyi yönetiriz.
Kullanımı
Kullanıma geçmeden önce, projemizi Vue 3 ve Composition API ile birlikte geliştireceğiz. Pinia ile filmleri listeleyip, filtreleme işlemi uyguluyor olacağız. Bunun için öncelikle TMDB adresinden API KEY alalım. Verileri o adresten getiriyor olacağız.
npm create vite@latest projeadi — –template vue
vue ile projemizi oluşturduk.
TMDB adresinden aldığımız APIKEY i .env dosyamız içerisine gönderelim.
npm i pinia axios
pinia ve axios kütüphanelerini projemize ekledik. axios api adresine istek atılırken kullanılacak.
Kurulumlarımızı tamamladık. Şimdi dosyalarımızın ayarlarını yapalım. Pinia kısmına geçmeden önce, kısaca api bağlantımızı sağlayalım. Öncelikle services adında bir klasör oluşturalım.
Sonrasında .env dosyasına yazdığımız bilgileri useApi.js içerisinde çağıralım.
MovieService.js içerisinde de api bağlantımızı kullanarak isteklerimizi yapacağımız adresleri girerek bir fonksiyon oluşturacağız. Sonrasında burayı Pinia ile haberleştiriyor olacağız.
Services klasörü ile işimiz bitti. Şimdi de stores adında bir klasör oluşturalım. Bu klasör içerisinde store’ larımızı yönetiyor olacağız. index.js adında bir dosya oluşturalım. Pinia ayarlarını burada düzenleyip main.js içerisinde kullanmasını sağlayacağız.
main.js
Pinia’ da proje içerisine dahil oldu. Artık store oluşturup bunları uygulamamızda çağırabiliriz.
stores klasörü içerisinde movie.js adında bir store oluşturalım.
defineStore methodunu oluşturduğumuz dosya içerisinde çağıralım.
Bu method id ve options şeklinde iki parametre alır. id kısmındaki değer tekil olmalı ve başka bir store içerisinde aynı id değerini kullanmamalıyız. Options kısmı ise Vuex’t eki state, getters, actions ile aynı özelliklere sahiptir.
Verileri getirmek için oluşturduğumuz MovieService’ i movie store içerisinde çağıralım.
state: () => ({
movies: [], //filmleri buraya göndereceğiz.
loading: false, //filmler yüklenirken loading ikonu gözükecek.
search: “”, // arama yapıldığı anda burası tetikleniyor olacak.
}),
getTopRatedMovies adında bir fonksiyon oluşturarak gelen yanıttan state içerisindeki movies e verileri gönderdik.
App.vue içerisinde store dosyamızı import ettik ve onMounted ile sayfa yüklendiğinde fonksiyonu tetiklemiş olduk.
Verileri ListItem içerisine gönderiyoruz.
Şimdi de filmleri filtreleyebileceğimiz bir getters yazalım. state içerisindeki search alanına veri gönderip filteredMovies ile tetikliyor olacağız.
Projeye buradaki linkten erişebilirsiniz.
