Vue Academy · Lezione

Fondamenti di Vuex

Comprenda lo store Vuex e lo stato centralizzato.

Fondamenti di Vuex è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Perché centralizzare lo stato?

Quando le applicazioni Vue crescono, condividere dati tra molti componenti diventa complicato. Passare props verso il basso ed emettere eventi verso l'alto attraverso alberi profondamente annidati è fragile. Vuex risolve il problema con uno store unico e centralizzato, che qualsiasi componente può leggere e modificare in modo prevedibile.

Un'unica fonte di verità

Vuex segue un flusso di dati unidirezionale. Tutto lo stato condiviso dell'applicazione risiede in un unico punto chiamato store. I componenti leggono lo stato dallo store e richiedono le modifiche tramite un'API controllata, così è sempre possibile sapere da dove provengono i dati e come cambiano.

Installare Vuex

Vuex 4 è la versione progettata per Vue 3. Installarlo con il proprio gestore di pacchetti, quindi creare e registrare lo store nell'app.

npm install vuex@4

Creare lo store

Utilizzare createStore per definire uno store. L'opzione state è una funzione che restituisce l'oggetto iniziale dello stato reattivo.

import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

Registrare lo store

Passare lo store all'app con app.use(store). In questo modo diventa disponibile in ogni componente tramite this.$store.

import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

const app = createApp(App)
app.use(store)
app.mount("#app")

La proprietà state

L'oggetto state contiene i dati dell'applicazione. È reattivo: quando lo stato cambia, ogni componente che lo utilizza esegue automaticamente un nuovo rendering. È come il data() dell'intera app.

state() {
  return {
    todos: [],
    isLoading: false,
    theme: "light"
  }
}

Accedere allo stato nell'Options API

All'interno di un componente, si accede allo store tramite this.$store.state. Una proprietà computed mantiene il valore reattivo.

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

Usare lo stato nel template

Una volta esposto tramite una proprietà computed, lo stato viene utilizzato nel template come qualsiasi valore locale.

<template>
  <p>Current count: {{ count }}</p>
</template>

L'helper mapState

Scrivere manualmente molte proprietà computed è ripetitivo. L'helper mapState le genera automaticamente a partire da un array di nomi dello stato.

import { mapState } from "vuex"

export default {
  computed: {
    ...mapState(["count", "user"])
  }
}

Rinominare con mapState

Passare un oggetto a mapState per rinominare le proprietà o calcolare valori derivati dallo stato.

computed: {
  ...mapState({
    total: "count",
    userName: (state) => state.user ? state.user.name : "Guest"
  })
}

Accedere allo stato nella Composition API

Con la Composition API, chiamare useStore() all'interno di setup per ottenere l'istanza dello store, quindi leggere lo stato tramite una proprietà computed.

import { computed } from "vue"
import { useStore } from "vuex"

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    return { count }
  }
}

Verifica rapida

Verificare la propria comprensione dei fondamenti di Vuex.

Riepilogo

Vuex fornisce uno store centralizzato e reattivo come unica fonte di verità. Lo si crea con createStore, lo si registra tramite app.use e si legge lo state attraverso proprietà computed o l'helper mapState. Nella Composition API si accede allo store con useStore(). Prossimamente imparerà a modificare lo stato in modo sicuro.

Domande Frequenti

La lezione «Fondamenti di Vuex» è gratuita?

Sì — il testo completo di «Fondamenti di Vuex» è 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 «Fondamenti di Vuex»?

Comprenda lo store Vuex e lo stato centralizzato. 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 1 di 3.

Quanto tempo richiede la lezione «Fondamenti di Vuex»?

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