Pinia, Vue'nin resmi durum yönetimi kütüphanesidir (Vuex'in halefi) — birçok bileşen arasında paylaşılması gereken durum için merkezi bir store ve Composition API üzerine inşa edilmiş basit, tip güvenli bir API sunar.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Bu "setup store" tam olarak bir composable gibi görünür — durum için ref, getter'lar için computed, actionlar için fonksiyonlar — Composition API'yi biliyorsanız sezgisel olacaktır.
<script setup>
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const { count, double } = storeToRefs(store); // keep state reactive when destructured
const { increment } = store; // actions can be destructured directly
</script>
<template>
<button @click="increment">{{ count }} (x2 = {{ double }})</button>
</template>
Önemli: durum/getter'ları yapıyı bozarken storeToRefs kullanın — sıradan yapı bozma reaktiviteyi kıracaktır (reactive ile aynı reaktivite uyarısı). Action'lar bunu gerektirmez.
✓ No mutations boilerplate — actions can mutate state directly
✓ Excellent TypeScript inference (Vuex was painful to type)
✓ Modular by design — many small stores, no nested-module complexity
✓ Composition-API-native, tiny API, devtools support
props/emits → parent ↔ child
provide/inject → share within a subtree
Pinia store → GLOBAL/app-wide shared state (auth user, cart, settings)
accessed by many unrelated components
Pinia, Vue uygulamalarında global, paylaşılan durum için standart çözümdür — kullanıcı/kimlik doğrulama, alışveriş sepetleri, uygulama ayarları, önbelleğe alınmış veriler — birçok uzak bileşenin tutarlı bir şekilde okuması ve güncellemesi gereken her şey.
Composable tarzı API'si, birinci sınıf TypeScript desteği ve Vuex'in başlangıç kodu eksikliği, bunu önerilen seçim yapar.
Bunun ne zaman başvurulacağını (props/inject'e karşı) durum gerçekten global olduğunda bilmek ve yapıyı bozarken reaktiviteyi korumak için storeToRefs kullanmak, bunu doğru şekilde kullanmanın özüdür.