Stores kombinieren und storeübergreifend zugreifen
Einen Store in einem anderen verwenden, Muster zur Store-Komposition und das Vermeiden zirkulärer Abhängigkeiten
Stores kombinieren und storeübergreifend zugreifen ist eine kostenlose Vue 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Stores können andere Stores verwenden
Reale Apps haben mehrere Stores, die voneinander abhängen. Ein Warenkorb-Store muss möglicherweise den Auth-Store verwenden, um den aktuellen Benutzer zu kennen. Pinia macht den storeübergreifenden Zugriff unkompliziert.
Einen Store innerhalb einer Action aufrufen
Rufen Sie innerhalb einer Action einfach das Composable des anderen Stores auf. Da Actions ausgeführt werden, nachdem Pinia aktiv ist, ist das sicher.
import { useAuthStore } from './auth'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
checkout() {
const auth = useAuthStore()
if (!auth.isLoggedIn) return
// proceed with auth.userId
}
}
})Die Syntax eines Setup-Stores
Neben dem Optionsobjekt akzeptiert defineStore auch eine Setup-Funktion. Sie ähnelt dem Setup einer Komponente: Definieren Sie Refs und Computeds und geben Sie sie anschließend zurück.
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})State als Refs
In einem Setup-Store wird jeder von Ihnen zurückgegebene ref und jedes zurückgegebene reactive zu State. Verwenden Sie ref für primitive Werte und reactive für Objekte.
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})Getter als computed
Eine zurückgegebene computed-Eigenschaft fungiert als Getter. Sie wird zwischengespeichert und ist reaktiv, genau wie Getter in einem Options-Store.
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})Actions als Funktionen
Eine zurückgegebene Funktion ist eine Action. Sie kann die Refs direkt lesen und schreiben, indem sie .value verwendet.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Refs und computed zurückgeben
Die wichtigste Regel für Setup-Stores lautet: Geben Sie alles zurück, was Sie bereitstellen möchten. Alles, was nicht zurückgegeben wird, bleibt im Store privat.
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})Storeübergreifende Verwendung in einem Setup-Store
In einem Setup-Store können Sie einen anderen Store auf der obersten Ebene aufrufen und ihn in Computeds oder Actions verwenden.
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})Zirkuläre Abhängigkeiten vermeiden
Wenn Store A Store B importiert und B A importiert, kann eine zirkuläre Abhängigkeit entstehen. Vermeiden Sie es, den anderen Store auf Modulebene aufzurufen. Rufen Sie ihn stattdessen innerhalb der benötigten Action oder des benötigten Getters auf.
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}Warum verzögerte Aufrufe helfen
Wenn Sie das Store-Composable innerhalb einer Funktion aufrufen, wird die Auflösung bis zur Laufzeit verzögert, nachdem alle Module geladen wurden. Dadurch wird der Importzyklus unterbrochen, der bei der Auswertung des Moduls zum Absturz führt.
Options- oder Setup-Store
Beide Varianten sind gleich leistungsfähig. Wählen Sie Options-Stores für eine vertraute, deklarative Struktur und Setup-Stores, wenn Sie die vollständige Flexibilität der Composition API benötigen, etwa für Watcher oder Composables innerhalb des Stores.
Kurzer Test
Testen Sie Ihr Verständnis für das Zusammensetzen von Stores.
Zusammenfassung
Sie haben gelernt, Stores zusammenzusetzen:
- Rufen Sie einen anderen Store-Composable innerhalb einer Action auf, um auf mehrere Stores zuzugreifen.
- Setup-Stores verwenden eine Funktion: Refs sind State, Computeds sind Getter und Funktionen sind Actions.
- Geben Sie alles zurück, was nach außen verfügbar sein soll.
- Rufen Sie Stores innerhalb von Funktionen verzögert auf, um zirkuläre Abhängigkeiten zu vermeiden.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Stores kombinieren und storeübergreifend zugreifen“ kostenlos?
Ja — der vollständige Text von „Stores kombinieren und storeübergreifend zugreifen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Stores kombinieren und storeübergreifend zugreifen“?
Einen Store in einem anderen verwenden, Muster zur Store-Komposition und das Vermeiden zirkulärer Abhängigkeiten Du übst Vue 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 Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue 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 „Stores kombinieren und storeübergreifend zugreifen“?
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 Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue 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
- Pinia vs. Vuex: Gründe für den Wechsel
- defineStore: State, Getter und Actions
- Stores kombinieren und storeübergreifend zugreifen
- Pinia-Persistenz und Devtools