Jak działa zarządzanie stanem za pomocą Pinia?

Question

Accepted Answer

**Pinia** to oficjalna biblioteka zarządzania stanem Vue (następca Vuex) — scentralizowany **magazyn** dla stanu, który musi być udostępniany wielu komponentom, z prostym, type-safe API zbudowanym na Composition API. ## Definiowanie magazynu ```js // stores/counter.js import { defineStore } from "pinia"; import { ref, computed } from "vue"; export const useCounterStore = defineStore("counter", () => { // state const count = ref(0); // getters (derived state) = computed const double = computed(() => count.value * 2); // actions (methods that mutate state) function increment() { count.value++; } async function fetchInitial() { count.value = await api.getCount(); } return { count, double, increment, fetchInitial }; }); ``` Ten "magazyn setup" wygląda dokładnie jak composable — `ref` na stan, `computed` na gettery, funkcje na akcje — co jest intuicyjne, jeśli znasz Composition API. ## Używanie magazynu w komponentach ```vue ``` **Ważne:** użyj `storeToRefs` podczas destrukturyzacji **stanu/getterów** — zwykła destrukturyzacja mogłaby przerwać reaktywność (takie samo zastrzeżenie reaktywności jak `reactive`). Akcje tego nie potrzebują. ## Dlaczego Pinia zamiast Vuex ```text ✓ 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 ``` ## Kiedy używać magazynu vs props/composables ```text 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 ``` ## Dlaczego to ważne Pinia to standardowe rozwiązanie do **globalnego, wspólnego stanu** w aplikacjach Vue — user/auth, koszyki zakupów, ustawienia aplikacji, buforowane dane — wszystko, co wiele oddalonych komponentów musi spójnie czytać i aktualizować. Jego API w stylu composable, wbudowana obsługa TypeScript i brak szablonowego kodu Vuex czynią go zalecanym wyborem. Wiedzenie, kiedy się do niego sięgnąć (vs props/inject), gdy stan jest naprawdę globalny, i używanie `storeToRefs` do zachowania reaktywności przy destrukturyzacji, to suть poprawnego jego użytku.