Mutations und Actions
Ändern Sie den Status mit Mutations und asynchronen Actions
Mutations und Actions ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Den Zustand sicher ändern
In Vuex ändern Sie den Zustand niemals direkt aus einer Komponente heraus. Stattdessen laufen alle Änderungen über Mutationen. Dieser eine, explizite Weg macht jede Zustandsänderung in den Vue DevTools nachvollziehbar und leichter zu debuggen.
Was ist eine Mutation?
Eine Mutation ist eine synchrone Funktion, die den aktuellen Zustand erhält und ihn verändert. Mutationen sind der einzige Ort, an dem der Zustand geändert werden darf.
mutations: {
increment(state) {
state.count++
}
}Mutationen müssen synchron sein
Mutationen müssen synchron ausgeführt werden. Wenn Sie asynchronen Code, etwa einen Netzwerkaufruf, in eine Mutation aufnehmen, können die DevTools nicht nachvollziehen, wann sich der Zustand tatsächlich geändert hat. Dadurch wird das Debugging per Zeitreise beeinträchtigt.
Eine Mutation committen
Um eine Mutation auszuführen, committen Sie sie aus einer Komponente anhand ihres Namens mit this.$store.commit.
methods: {
add() {
this.$store.commit("increment")
}
}Eine Payload übergeben
Mutationen akzeptieren ein zusätzliches Argument namens Payload, mit dem Sie Daten an die Änderung übergeben können.
mutations: {
incrementBy(state, amount) {
state.count += amount
}
}
// commit with payload
this.$store.commit("incrementBy", 5)Payloads im Objektstil
Für mehrere Werte übergeben Sie eine Objekt-Payload. Das ist klarer und flexibler als Positionsargumente.
mutations: {
setUser(state, payload) {
state.user = { id: payload.id, name: payload.name }
}
}
this.$store.commit("setUser", { id: 1, name: "Ada" })Was ist eine Action?
Eine Action verarbeitet asynchrone Aufgaben und Geschäftslogik. Actions ändern den Zustand nicht selbst, sondern committen Mutationen. So bleibt asynchroner Code von der eigentlichen Zustandsänderung getrennt.
Eine Action definieren
Eine Action erhält ein Context-Objekt. Darüber können Sie Mutationen mit commit committen oder auf den Zustand zugreifen.
actions: {
async fetchUser(context, userId) {
const res = await fetch("/api/users/" + userId)
const data = await res.json()
context.commit("setUser", data)
}
}Den Context destrukturieren
Häufig wird commit direkt aus dem Context destrukturiert, um den Code kürzer zu halten.
actions: {
async loadTodos({ commit }) {
commit("setLoading", true)
const res = await fetch("/api/todos")
commit("setTodos", await res.json())
commit("setLoading", false)
}
}Eine Action dispatchen
Komponenten lösen Actions mit this.$store.dispatch aus und können dabei optional einen Payload übergeben. Dispatch gibt bei asynchronen Actions ein Promise zurück.
methods: {
async load() {
await this.$store.dispatch("loadTodos")
}
}Der vollständige Ablauf
Der vollständige Ablauf sieht so aus: Eine Komponente dispatcht eine Action, die Action führt asynchrone Aufgaben aus und committet eine Mutation, und die Mutation ändert den Zustand. Der reaktive Zustand aktualisiert die Benutzeroberfläche anschließend automatisch.
Kurzer Test
Testen Sie Ihr Wissen über Mutationen und Actions.
Zusammenfassung
Der Zustand wird ausschließlich durch Mutationen geändert. Diese sind synchron und werden mit commit committed. Asynchrone Logik gehört in Actions, die mit dispatch ausgelöst werden und Mutationen committen, sobald sie bereit sind. Beide akzeptieren Payloads zur Übergabe von Daten. Als Nächstes fügen Sie Getter hinzu und teilen den Store in Module auf.
Häufig gestellte Fragen
Ist die Lektion „Mutations und Actions“ kostenlos?
Ja — der vollständige Text von „Mutations und Actions“ 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 „Mutations und Actions“?
Ändern Sie den Status mit Mutations und asynchronen Actions 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 2 von 3.
Wie lange dauert die Lektion „Mutations und Actions“?
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