Pinia für Vue: defineStore und storeToRefs
Definieren Sie mit defineStore einen Pinia-Store, greifen Sie in Komponenten darauf zu und verwenden Sie storeToRefs, damit beim Destructuring des States die Reaktivität erhalten bleibt.
Pinia für Vue: defineStore und storeToRefs ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Pinia?
Pinia ist die offizielle State-Management-Bibliothek für Vue 3. Sie ersetzt Vuex durch eine einfachere, typsichere und in DevTools integrierte API, die sich wie die Composition API anfühlt.
Pinia installieren
Installieren und registrieren Sie das Pinia-Plugin bei der Vue-App.
npm install pinia
// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');defineStore — Stil der Composition API
defineStore erstellt einen Store. Beim Stil der Composition API werden ref, computed und Funktionen direkt verwendet — genau wie in einem Composable.
// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() { count.value++; }
return { count, doubled, increment };
});defineStore — Options-Stil
Der Options-Stil entspricht der Options API von Vue: state() für reaktive Daten, Getter (wie computed) und Actions (wie methods).
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
doubled: (state) => state.count * 2,
},
actions: {
increment() { this.count++; },
async fetchAndSet(id: string) {
this.count = await fetchCount(id);
}
}
});Einen Store in einer Komponente verwenden
Rufen Sie den Store-Hook innerhalb von setup() auf. Der Store ist ein reaktives Objekt — Sie können den State direkt lesen und Actions aufrufen.
<script setup>
import { useCounterStore } from '@/stores/counter';
const store = useCounterStore();
</script>
<template>
<p>{{ store.count }}</p>
<button @click="store.increment">+</button>
</template>storeToRefs — Sicheres Destrukturieren
Durch direktes Destrukturieren eines Stores geht die Reaktivität von State und Gettern verloren (sie werden zu einfachen Werten). Verwenden Sie storeToRefs(), um die reaktive Destrukturierung zu ermöglichen.
import { storeToRefs } from 'pinia';
const store = useCounterStore();
// Actions can be destructured normally (they're functions):
const { increment } = store;
// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);$patch — Stapelaktualisierungen
store.$patch() wendet mehrere State-Änderungen als einen Vorgang an. Das ist nützlich, um zusammengehörige Aktualisierungen zu bündeln.
store.$patch({
count: 10,
name: 'Updated'
});
// Or with a function for complex logic:
store.$patch(state => {
state.items.push(newItem);
state.total += newItem.price;
});$subscribe — Store-Änderungen beobachten
store.$subscribe(callback) reagiert auf jede Mutation des Stores, ähnlich wie Vues watch, aber für den gesamten Store.
Pinia-Plugins
Pinia-Plugins erweitern jeden Store. Häufige Anwendungsfälle sind das Speichern des States in localStorage, das Hinzufügen von Debugging-Protokollen oder das Injizieren von Services.
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);Pinia DevTools
Pinia ist in Vue DevTools integriert. Sie können den Store-Zustand untersuchen, sehen, welche Actions aufgerufen wurden, und zwischen Snapshots des Zustands navigieren.
Mehrere Stores
Erstellen Sie einen Store pro Domäne (useAuthStore, useCartStore, useNotificationStore). Stores können einander importieren und verwenden. Die flache Struktur von Pinia (keine verschachtelten Module) macht dies einfach.
Schnelltest
Warum sollten Sie storeToRefs() verwenden, wenn Sie einen Pinia-Store destrukturieren?
Zusammenfassung: Pinia
defineStore erstellt Stores. Verwenden Sie den Composition-API- oder Options-API-Stil. Greifen Sie mit dem useXxxStore()-Hook darauf zu. Verwenden Sie storeToRefs() für eine reaktive Destrukturierung. $patch() bündelt Aktualisierungen. Plugins dienen zur Persistenz und für weitere Erweiterungen. Integration mit DevTools. Ein Store pro Domäne – keine verschachtelten Module wie bei Vuex.
Häufig gestellte Fragen
Ist die Lektion „Pinia für Vue: defineStore und storeToRefs“ kostenlos?
Ja — der vollständige Text von „Pinia für Vue: defineStore und storeToRefs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Pinia für Vue: defineStore und storeToRefs“?
Definieren Sie mit defineStore einen Pinia-Store, greifen Sie in Komponenten darauf zu und verwenden Sie storeToRefs, damit beim Destructuring des States die Reaktivität erhalten bleibt. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Pinia für Vue: defineStore und storeToRefs“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Redux Toolkit: createSlice und configureStore
- Zustand für schlanken React-State
- Pinia für Vue: defineStore und storeToRefs
- Wann globalen und lokalen State verwenden