Pinia Nedir? Vue Pinia Kullanımı

Yazılım

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.

pinia env

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.

pinia folders

Sonrasında .env dosyasına yazdığımız bilgileri useApi.js içerisinde çağıralım.

pinia useapi

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.

pinia movie service

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.

pinia

main.js

pinia main

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.
pinia definestore

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.

pinia movie

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.

pinia action

App.vue içerisinde store dosyamızı import ettik ve onMounted ile sayfa yüklendiğinde fonksiyonu tetiklemiş olduk.

pinia appvue

Verileri ListItem içerisine gönderiyoruz.

pinia list

Şimdi de filmleri filtreleyebileceğimiz bir getters yazalım. state içerisindeki search alanına veri gönderip filteredMovies ile tetikliyor olacağız.

pinia getter

App.vue içerisinde göndereceğimiz değeri watch ile izleyelim ve değişiklik olduğu anda state tarafına gönderelim. Template içerisinde de bir input oluşturarak state.searchMovie değerini v-model içerisine gönderelim.

pinia watch

 

vpinia

 

Projeye buradaki linkten erişebilirsiniz.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Fill out this field
Fill out this field
Lütfen geçerli bir e-posta adresi yazın.

Yeni
Sosyal Medya
Instagram
YouTube
Instagram
YouTube
Bu yazıyı beğendin mi? Arkadaşlarınla paylaş!
Benzer İçerikler: