Pinia είναι η επίσημη βιβλιοθήκη διαχείρισης κατάστασης του Vue (ο διάδοχος του Vuex) — ένα κεντρικό store για κατάσταση που πρέπει να μοιράζεται μεταξύ πολλών συστατικών, με ένα απλό, ασφαλές API ως προς τον τύπο που δημιουργήθηκε στο Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Αυτό το "setup store" φαίνεται ακριβώς σαν ένα composable — ref για κατάσταση, computed για getters, συναρτήσεις για actions — κάνοντάς το διαισθητικό αν γνωρίζετε το Composition API.
<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>
Σημαντικό: χρησιμοποιήστε storeToRefs όταν αποδομείτε κατάσταση/getters — η απλή αποδόμηση θα έσπαγε την αντιδραστικότητα (ίδια αντιδραστική προειδοποίηση με το reactive). Τα actions δεν το χρειάζονται.
✓ 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 — χρήστης/έλεγχος ταυτότητας, καλάθια αγορών, ρυθμίσεις εφαρμογής, δεδομένα που αποθηκεύονται στη μνήμη — οτιδήποτε πολλά απομακρυσμένα συστατικά πρέπει να διαβάσουν και να ενημερώσουν συνεπώς.
Το API του τύπου composable, η υποστήριξη TypeScript πρώτης κατηγορίας και η έλλειψη της boilerplate του Vuex το κάνουν την προτεινόμενη επιλογή.
Το να γνωρίζετε πότε να το χρησιμοποιήσετε (έναντι props/inject) όταν η κατάσταση είναι πραγματικά παγκόσμια, και να χρησιμοποιήσετε storeToRefs για να διατηρήσετε την αντιδραστικότητα κατά την αποδόμηση, είναι ο πυρήνας της σωστής χρήσης του.