Pinia ist die offiziell empfohlene Zustandsverwaltung für Vue 3 und der Nachfolger von Vuex. Der spürbarste Unterschied: Die Mutationen fallen weg, Actions ändern den Zustand direkt. Das macht den Einstieg angenehm kurz — und führt geradewegs in eine Falle, die keinen Fehler auslöst.
Eine Zeile, die still bricht
Ein Store fühlt sich an wie ein gewöhnliches Objekt, also zerlegt man ihn auch
so: const { offen, anzahl } = useAusleihe(). Das läuft durch, die Anzeige
stimmt beim ersten Rendern — und aktualisiert sich danach nie wieder.
Der Grund ist, dass der Store ein reaktives Objekt ist und kein Bündel aus
Refs. Beim Destrukturieren entsteht eine Kopie des Werts ohne Verbindung zur
Quelle. Richtig ist der Umweg über storeToRefs, das für Zustand und Getter
je ein Ref erzeugt.
Actions dürfen zerlegt werden
Für Funktionen gilt das nicht: Actions sind an nichts gebunden und lassen sich
direkt aus dem Store herausziehen. storeToRefs darauf anzuwenden ist unnötig
und irreführend. In der Praxis stehen deshalb zwei Zeilen nebeneinander — eine
für die Werte, eine für die Funktionen.
Nicht jeder Zustand gehört überhaupt hinein
Die zweite Frage kommt vor der ersten: Formulareingaben und ein aufgeklapptes
Menü bleiben in der Komponente, Thema und Sprache eines Teilbaums gehören zu
provide/inject. In den Store wandert, was mehreren Ansichten gehört — der
angemeldete Nutzer, der Warenkorb. Im Zweifel unten anfangen: nach oben wandern
ist leicht, zurück selten.
Mehr dazu im Seminar
Stores schneiden, Getter, Actions für API-Aufrufe und der Vergleich von Options- und Setup-Store stehen im Modul State Management mit Pinia des Seminars Vue.js Grundlagen & Composition API.