Vuex-Grundlagen
Verstehen Sie den Vuex-Store und den zentral verwalteten Status
Vuex-Grundlagen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. 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 3 Lektionen.
Warum ein zentraler Zustand?
Wenn Vue-Anwendungen wachsen, wird das Teilen von Daten zwischen vielen Komponenten mühsam. Props über tief verschachtelte Komponenten weiterzugeben und Ereignisse nach oben zu senden, ist fehleranfällig. Vuex löst dieses Problem mit einem einzigen zentralen Store, aus dem jede Komponente auf vorhersehbare Weise lesen und in den sie schreiben kann.
Die zentrale Datenquelle
Vuex folgt einem unidirektionalen Datenfluss. Der gesamte gemeinsame Anwendungszustand liegt an einer Stelle, dem Store. Komponenten lesen den Zustand aus dem Store und fordern Änderungen über eine kontrollierte API an. So wissen Sie immer, woher die Daten stammen und wie sie sich ändern.
Vuex installieren
Vuex 4 ist die für Vue 3 entwickelte Version. Installieren Sie es mit Ihrem Paketmanager und erstellen und registrieren Sie anschließend den Store in Ihrer App.
npm install vuex@4Den Store erstellen
Verwenden Sie createStore, um einen Store zu definieren. Die Option state ist eine Funktion, die das initiale reaktive Zustandsobjekt zurückgibt.
import { createStore } from "vuex"
export const store = createStore({
state() {
return {
count: 0,
user: null
}
}
})Den Store registrieren
Übergeben Sie den Store mit app.use(store) an Ihre App. Dadurch steht er jeder Komponente über this.$store zur Verfügung.
import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"
const app = createApp(App)
app.use(store)
app.mount("#app")Die State-Eigenschaft
Das state-Objekt enthält die Daten Ihrer Anwendung. Es ist reaktiv: Wenn sich der Zustand ändert, wird jede Komponente, die ihn verwendet, automatisch neu gerendert. Stellen Sie es sich als data() Ihrer gesamten App vor.
state() {
return {
todos: [],
isLoading: false,
theme: "light"
}
}Auf den Zustand in der Options API zugreifen
Innerhalb einer Komponente greifen Sie über this.$store.state auf den Store zu. Eine computed-Eigenschaft sorgt dafür, dass der Wert reaktiv bleibt.
export default {
computed: {
count() {
return this.$store.state.count
}
}
}Den Zustand im Template verwenden
Sobald der Zustand über eine computed-Eigenschaft verfügbar gemacht wurde, wird er im Template wie jeder lokale Wert verwendet.
<template>
<p>Current count: {{ count }}</p>
</template>Der mapState-Helper
Viele computed-Eigenschaften von Hand zu schreiben, ist wiederholend. Der mapState-Helper erzeugt sie anhand eines Arrays von Zustandsnamen für Sie.
import { mapState } from "vuex"
export default {
computed: {
...mapState(["count", "user"])
}
}mapState mit Umbenennung
Übergeben Sie ein Objekt an mapState, um Eigenschaften umzubenennen oder abgeleitete Werte aus dem Zustand zu berechnen.
computed: {
...mapState({
total: "count",
userName: (state) => state.user ? state.user.name : "Guest"
})
}Auf den Zustand in der Composition API zugreifen
Rufen Sie in der Composition API innerhalb von setup useStore() auf, um die Store-Instanz abzurufen, und lesen Sie den Zustand anschließend über eine computed-Eigenschaft aus.
import { computed } from "vue"
import { useStore } from "vuex"
export default {
setup() {
const store = useStore()
const count = computed(() => store.state.count)
return { count }
}
}Kurzer Test
Testen Sie Ihr Verständnis der Vuex-Grundlagen.
Zusammenfassung
Vuex stellt einen zentralen reaktiven Store als zentrale Datenquelle bereit. Sie erstellen ihn mit createStore, registrieren ihn über app.use und lesen state über computed-Eigenschaften oder den mapState-Helper aus. In der Composition API greifen Sie mit useStore() auf den Store zu. Als Nächstes lernen Sie, wie Sie diesen Zustand sicher ändern.
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 „Vuex-Grundlagen“ kostenlos?
Ja — der vollständige Text von „Vuex-Grundlagen“ 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 3 Lektionen.
Was lerne ich in „Vuex-Grundlagen“?
Verstehen Sie den Vuex-Store und den zentral verwalteten Status 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 1 von 3.
Wie lange dauert die Lektion „Vuex-Grundlagen“?
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
- Vuex-Grundlagen
- Mutations und Actions
- Getter und Module