Wie funktioniert State Management mit Pinia?

Question

Accepted Answer

**Pinia** ist Vues offizielle State-Management-Bibliothek (der Nachfolger von Vuex) — ein zentralisiertes **Store** für State, der über viele Komponenten hinweg geteilt werden muss, mit einer einfachen, typesicheren API, die auf der Composition API aufgebaut ist. ## Definieren eines Stores ```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 }; }); ``` Dieser "Setup Store" sieht genau wie ein Composable aus — `ref` für State, `computed` für Getter, Funktionen für Actions — was es intuitiv macht, wenn du die Composition API kennst. ## Verwenden des Stores in Komponenten ```vue ``` **Wichtig:** verwende `storeToRefs` beim Destrukturieren von **State/Gettern** — einfaches Destrukturieren würde die Reaktivität brechen (gleiche reaktive Warnung wie bei `reactive`). Actions brauchen das nicht. ## Warum Pinia statt 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 ``` ## Wann ein Store statt Props/Composables verwenden ```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 ``` ## Warum es wichtig ist Pinia ist die Standardlösung für **globalen, gemeinsamen State** in Vue-Apps — Benutzer/Authentifizierung, Einkaufswagen, App-Einstellungen, zwischengespeicherte Daten — alles, das viele entfernte Komponenten konsistent lesen und aktualisieren müssen. Its Composable-style API, erstklassige TypeScript-Unterstützung und der Mangel an Vuex' Boilerplate machen es zur empfohlenen Wahl. Zu wissen, wann man es nutzen sollte (statt Props/Inject), wenn State wirklich global ist, und `storeToRefs` zu verwenden, um die Reaktivität beim Destrukturieren zu bewahren, ist der Kern seiner korrekten Verwendung.