Vue Academy · Lezione

Mutation e action

Modifichi lo stato con mutation e action asincrone.

Mutation e action è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Modificare lo stato in modo sicuro

In Vuex non si modifica mai direttamente lo stato da un componente. Tutte le modifiche passano invece attraverso le mutations. Questo percorso unico ed esplicito rende ogni modifica dello stato tracciabile e facilita il debug in Vue DevTools.

Che cos'è una mutation?

Una mutation è una funzione sincrona che riceve lo stato corrente e lo modifica. Le mutation sono l'unico punto in cui è consentito modificare lo stato.

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

Le mutation devono essere sincrone

Le mutation devono essere eseguite in modo sincrono. Inserendo codice async, ad esempio una chiamata di rete, all'interno di una mutation, DevTools non può stabilire quando lo stato è effettivamente cambiato, compromettendo il debugging con cronologia.

Eseguire il commit di una mutation

Per eseguire una mutation, si esegue il commit del suo nome da un componente usando this.$store.commit.

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

Passare un payload

Le mutation accettano un argomento aggiuntivo chiamato payload, che consente di passare dati alla modifica.

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

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

Payload in stile oggetto

Per più valori, passare un payload sotto forma di oggetto. È più chiaro e flessibile degli argomenti posizionali.

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

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

Che cos'è un'azione

Un'azione gestisce le operazioni asincrone e la logica di business. Le azioni non modificano direttamente lo stato; eseguono invece il commit delle mutazioni. In questo modo il codice asincrono rimane separato dall'effettiva modifica dello stato.

Definizione di un'azione

Un'azione riceve un oggetto context. Da questo oggetto è possibile eseguire il commit delle mutazioni o accedere allo stato.

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

Destrutturazione del context

Per maggiore brevità, è comune destrutturare direttamente commit dal context.

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

Esecuzione di un'azione

I componenti attivano le azioni con this.$store.dispatch, passando un payload opzionale. Il dispatch restituisce una promise per le azioni asincrone.

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

Il flusso completo

Il ciclo completo è il seguente: un componente invia un'azione, l'azione esegue operazioni asincrone e committa una mutazione, quindi la mutazione modifica lo stato. Lo stato reattivo aggiorna automaticamente l'interfaccia utente.

Verifica rapida

Verifichi la Sua conoscenza di mutazioni e azioni.

Riepilogo

Lo stato cambia solo tramite le mutazioni, che sono sincrone e vengono sottoposte a commit con commit. La logica asincrona risiede nelle azioni, attivate con dispatch, che eseguono il commit delle mutazioni quando sono pronte. Entrambe accettano payload per passare dati. Ora aggiungerà i getter e dividerà lo store in moduli.

Domande Frequenti

La lezione «Mutation e action» è gratuita?

Sì — il testo completo di «Mutation e action» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Mutation e action»?

Modifichi lo stato con mutation e action asincrone. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.

Quanto tempo richiede la lezione «Mutation e action»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy