Vue için Pinia: defineStore ve storeToRefs
defineStore ile bir Pinia deposu tanımlayın, bileşenlerde erişin ve durumun destructuring sırasında tepkiselliğini korumak için storeToRefs kullanın.
Vue için Pinia: defineStore ve storeToRefs, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Pinia Nedir?
Pinia, Vue 3 için resmî durum yönetimi kütüphanesidir. Vuex'in yerini, Composition API gibi hissettiren daha basit, tür güvenli ve DevTools ile bütünleşik bir API ile alır.
Pinia'yı Yükleme
Pinia eklentisini Vue uygulamasına yükleyip kaydedin.
npm install pinia
// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');defineStore — Composition API Stili
defineStore bir store oluşturur. Composition API stili, tıpkı birleştirilebilir işlevde olduğu gibi ref, computed ve işlevleri doğrudan kullanır.
// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() { count.value++; }
return { count, doubled, increment };
});defineStore — Options Stili
Options stili, Vue'nun Options API'sini yansıtır: reaktif veriler için state(), computed gibi getters ve yöntemler gibi actions kullanılır.
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
doubled: (state) => state.count * 2,
},
actions: {
increment() { this.count++; },
async fetchAndSet(id: string) {
this.count = await fetchCount(id);
}
}
});Bileşende Store Kullanma
Store kancasını setup() içinde çağırın. Store reaktif bir nesnedir — durumu okuyabilir ve eylemleri doğrudan çağırabilirsiniz.
<script setup>
import { useCounterStore } from '@/stores/counter';
const store = useCounterStore();
</script>
<template>
<p>{{ store.count }}</p>
<button @click="store.increment">+</button>
</template>storeToRefs — Güvenli Parçalarına Ayırma
Bir store'u doğrudan parçalarına ayırmak, durum ve getters için reaktiviteyi kaybettirir (bunlar düz değerlere dönüşür). Reaktif biçimde parçalarına ayırmak için storeToRefs() kullanın.
import { storeToRefs } from 'pinia';
const store = useCounterStore();
// Actions can be destructured normally (they're functions):
const { increment } = store;
// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);$patch — Toplu Güncellemeler
store.$patch(), birden çok durum değişikliğini tek işlem olarak uygular. İlişkili güncellemeleri toplu uygulamak için kullanışlıdır.
store.$patch({
count: 10,
name: 'Updated'
});
// Or with a function for complex logic:
store.$patch(state => {
state.items.push(newItem);
state.total += newItem.price;
});$subscribe — Store Değişikliklerini İzleme
store.$subscribe(callback), Vue'nun watch işlevine benzer şekilde herhangi bir store değişikliğine tepki verir; ancak tüm store'u izler.
Pinia Eklentileri
Pinia eklentileri her store'u genişletir. Yaygın kullanım alanları: durumu localStorage'a kaydetmek, hata ayıklama günlüğü eklemek veya hizmetleri içeri aktarmaktır.
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);Pinia DevTools
Pinia, Vue DevTools ile tümleşir. Depo durumunu inceleyebilir, hangi eylemlerin çağrıldığını görebilir ve durum anlık görüntüleri arasında zamanda ileri veya geri gidebilirsiniz.
Birden Çok Depo
Her alan için bir depo oluşturun (useAuthStore, useCartStore, useNotificationStore). Depolar birbirlerini içe aktarabilir ve kullanabilir. Pinia'nın düz yapısı (iç içe modüller yoktur) bunu kolaylaştırır.
Hızlı Kontrol
Bir Pinia deposunun parçalarını ayırırken neden storeToRefs() kullanmalısınız?
Özet: Pinia
defineStore depolar oluşturur. Composition API veya Options API stili kullanılabilir. useXxxStore() kancasıyla erişilir. Tepkisel parçalama için storeToRefs() kullanılır. Toplu güncellemeler için $patch() kullanılır. Kalıcılık ve diğer genişletmeler için eklentilerden yararlanılır. DevTools tümleştirmesi vardır. Her alan için bir depo kullanılır; Vuex tarzı iç içe modüller yoktur.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“Vue için Pinia: defineStore ve storeToRefs” dersi ücretsiz mi?
Evet — “Vue için Pinia: defineStore ve storeToRefs” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Vue için Pinia: defineStore ve storeToRefs” dersinde ne öğreneceğim?
defineStore ile bir Pinia deposu tanımlayın, bileşenlerde erişin ve durumun destructuring sırasında tepkiselliğini korumak için storeToRefs kullanın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Vue için Pinia: defineStore ve storeToRefs” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Redux Toolkit: createSlice ve configureStore
- Hafif React Durumu için Zustand
- Vue için Pinia: defineStore ve storeToRefs
- Genel ve Yerel Durum Ne Zaman Kullanılır