Vue Academy · Lektion

Mutations og actions

Ændr state med mutations og asynkrone actions

Lektion 2 af 313 trin

Mutations og actions er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 2 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 3 lektioner i alt.

Sikker ændring af tilstanden

I Vuex ændrer du aldrig tilstanden direkte fra en komponent. I stedet går alle ændringer gennem mutationer. Denne ene, eksplicitte vej gør alle tilstandsændringer sporbare og nemme at fejlfinde i Vue DevTools.

Hvad er en mutation?

En mutation er en synkron funktion, der modtager den aktuelle tilstand og ændrer den. Mutationer er det eneste sted, hvor tilstanden må ændres.

mutations: {
  increment(state) {
    state.count++
  }
}

Mutationer skal være synkrone

Mutationer skal køre synkront. Hvis du placerer asynkron kode, f.eks. et netværkskald, i en mutation, kan DevTools ikke spore, hvornår tilstanden faktisk blev ændret, og fejlfinding med tidsrejse går i stykker.

Commit af en mutation

For at køre en mutation committer du den efter navn fra en komponent ved hjælp af this.$store.commit.

methods: {
  add() {
    this.$store.commit("increment")
  }
}

Sende en payload

Mutationer accepterer et ekstra argument, der kaldes en payload, så du kan sende data med ændringen.

mutations: {
  incrementBy(state, amount) {
    state.count += amount
  }
}

// commit with payload
this.$store.commit("incrementBy", 5)

Payloads i objektstil

Ved flere værdier skal du sende en payload som et objekt. Det er tydeligere og mere fleksibelt end positionsargumenter.

mutations: {
  setUser(state, payload) {
    state.user = { id: payload.id, name: payload.name }
  }
}

this.$store.commit("setUser", { id: 1, name: "Ada" })

Hvad er en handling?

En handling håndterer asynkront arbejde og forretningslogik. Handlinger ændrer ikke selv tilstanden; i stedet udfører de mutationer. Det holder asynkron kode adskilt fra selve ændringen af tilstanden.

Definere en handling

En handling modtager et context-objekt. Herfra kan du udføre mutationer med commit eller tilgå tilstanden.

actions: {
  async fetchUser(context, userId) {
    const res = await fetch("/api/users/" + userId)
    const data = await res.json()
    context.commit("setUser", data)
  }
}

Destrukturering af context

Det er almindeligt at destrukturere commit direkte fra context for at gøre koden kortere.

actions: {
  async loadTodos({ commit }) {
    commit("setLoading", true)
    const res = await fetch("/api/todos")
    commit("setTodos", await res.json())
    commit("setLoading", false)
  }
}

Afsendelse af en handling

Komponenter udløser handlinger med this.$store.dispatch og kan sende valgfrie nyttedata med. Afsendelsen returnerer et promise for asynkrone handlinger.

methods: {
  async load() {
    await this.$store.dispatch("loadTodos")
  }
}

Det fulde forløb

Den komplette cyklus er: En komponent udløser en handling, handlingen udfører asynkront arbejde og udfører en mutation, og mutationen ændrer tilstanden. Den reaktive tilstand opdaterer derefter automatisk brugerfladen.

Hurtig test

Test din viden om mutationer og handlinger.

Besvar den i den interaktive lektion

Opsummering

Tilstanden ændres kun gennem mutationer, som er synkrone og udføres med commit. Asynkron logik hører hjemme i handlinger, der udløses med dispatch og udfører mutationer, når de er klar. Begge dele accepterer nyttedata, som kan bruges til at sende data. Nu skal du tilføje gettere og opdele storet i moduler.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Mutations og actions” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Mutations og actions”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 3 lektioner i alt.

Hvad lærer jeg i “Mutations og actions”?

Ændr state med mutations og asynkrone actions Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 3.

Hvor lang tid tager lektionen “Mutations og actions”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Vue Academy