Getter e moduli
Calcoli lo stato derivato e organizzi lo store in moduli.
Getter e moduli è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 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.
Stato calcolato con i getter
A volte è necessario uno stato derivato, ad esempio un elenco filtrato o un conteggio. Un getter è l'equivalente nello store di una proprietà calcolata: ricava un valore dallo stato e memorizza il risultato finché le sue dipendenze non cambiano.
Definizione di un getter
Un getter è una funzione che riceve lo stato e restituisce un valore derivato.
getters: {
completedTodos(state) {
return state.todos.filter(t => t.done)
}
}Getter che usano altri getter
Un getter riceve come secondo argomento tutti gli altri getter, quindi è possibile combinarli.
getters: {
completedTodos(state) {
return state.todos.filter(t => t.done)
},
completedCount(state, getters) {
return getters.completedTodos.length
}
}Accesso ai getter
Legga i getter tramite this.$store.getters in una proprietà calcolata.
computed: {
doneCount() {
return this.$store.getters.completedCount
}
}Getter in stile metodo
Restituisca una funzione da un getter per poter passare argomenti. Tenga presente che i getter in stile metodo non vengono memorizzati nella cache e vengono eseguiti a ogni chiamata.
getters: {
todoById: (state) => (id) => {
return state.todos.find(t => t.id === id)
}
}
// usage
this.$store.getters.todoById(3)L'helper mapGetters
Come mapState, l'helper mapGetters trasforma automaticamente i getter in proprietà calcolate.
import { mapGetters } from "vuex"
export default {
computed: {
...mapGetters(["completedTodos", "completedCount"])
}
}Perché dividere in moduli
Uno store molto grande diventa difficile da gestire. Vuex consente di dividere lo store in moduli, ciascuno con il proprio stato, le proprie mutazioni, azioni e getter, mantenendo insieme la logica correlata.
Definizione di un modulo
Un modulo è semplicemente un oggetto con le stesse opzioni di uno store. I moduli vengono registrati nella chiave modules.
const cart = {
state: () => ({ items: [] }),
mutations: {
addItem(state, item) { state.items.push(item) }
},
getters: {
itemCount: (state) => state.items.length
}
}Registrazione dei moduli
Combini i moduli nello store principale, sotto modules. Ogni chiave diventa il nome del modulo.
import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"
export const store = createStore({
modules: { cart, user }
})Namespace dei moduli
Imposti namespaced: true per assegnare al modulo il proprio ambito. In questo modo evita conflitti tra i nomi dei moduli e rende esplicita la struttura.
const cart = {
namespaced: true,
state: () => ({ items: [] }),
getters: {
itemCount: (state) => state.items.length
}
}Accesso ai moduli con namespace
Quando si usa un namespace, anteponga il nome del modulo durante il commit, il dispatch o la lettura dei getter.
// module state lives under the module key
this.$store.state.cart.items
// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")Verifica rapida
Verifichi la Sua conoscenza di getter e moduli.
Riepilogo
I getter ricavano valori memorizzati nella cache dallo stato e sono accessibili tramite this.$store.getters o mapGetters. I moduli dividono uno store grande in unità specializzate; impostando namespaced: true si assegna loro un ambito, quindi è possibile accedere ai membri usando il prefisso module/name. Ora dispone dell'intero toolkit Vuex: stato, mutazioni, azioni, getter e moduli.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 42
- Lezioni
- 156
Domande Frequenti
La lezione «Getter e moduli» è gratuita?
Sì — il testo completo di «Getter e moduli» è 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 «Getter e moduli»?
Calcoli lo stato derivato e organizzi lo store in moduli. 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 3 di 3.
Quanto tempo richiede la lezione «Getter e moduli»?
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
- Fondamenti di Vuex
- Mutation e action
- Getter e moduli