Composizione degli store e accesso tra store
Utilizzo di uno store all'interno di un altro, modelli di composizione degli store, prevenzione delle dipendenze circolari.
Composizione degli store e accesso tra store è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. 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 4 lezioni in totale.
Gli store possono usare altri store
Le applicazioni reali hanno più store che devono interagire. Uno store del carrello potrebbe aver bisogno dello store di autenticazione per conoscere l'utente corrente. Pinia rende semplice l'accesso tra store.
Chiamare uno store all'interno di un'action
All'interno di un'action, chiami semplicemente il composable dell'altro store. Poiché le actions vengono eseguite dopo l'attivazione di Pinia, è sicuro farlo.
import { useAuthStore } from './auth'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
checkout() {
const auth = useAuthStore()
if (!auth.isLoggedIn) return
// proceed with auth.userId
}
}
})La sintassi del setup store
Oltre all'oggetto di opzioni, defineStore accetta una funzione setup. È simile al setup di un componente: dichiari ref e computed, quindi li restituisci.
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})Lo state come ref
In un setup store, ogni ref o reactive restituito diventa state. Usi ref per i valori primitivi e reactive per gli oggetti.
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})I getter come computed
Un computed restituito funge da getter. È memorizzato nella cache e reattivo, proprio come i getter degli option store.
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})Le actions come funzioni
Una funzione restituita è una action. Può leggere e scrivere direttamente i ref usando .value.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Restituire ref e computed
La regola fondamentale dei setup store è la seguente: restituisca tutto ciò che vuole esporre. Tutto ciò che non viene restituito rimane privato dello store.
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})Accesso tra store in un setup store
In un setup store può chiamare un altro store al livello principale e usarlo nei computed o nelle actions.
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})Evitare le dipendenze circolari
Se lo store A importa lo store B e B importa A, può verificarsi una dipendenza circolare. Eviti di chiamare l'altro store al livello principale del modulo; lo chiami invece all'interno dell'action o del getter in cui serve.
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}Perché le chiamate lazy sono utili
Chiamare il composable dello store all'interno di una funzione rimanda la risoluzione al runtime, dopo che tutti i moduli sono stati caricati. In questo modo si interrompe il ciclo di import che causa un arresto durante la valutazione del modulo.
Option store e setup store
Entrambi gli stili hanno la stessa potenza. Scelga gli option store per una struttura dichiarativa e familiare; scelga i setup store quando desidera tutta la flessibilità della Composition API, come watcher o composable all'interno dello store.
Verifica rapida
Verifichi la Sua comprensione della composizione degli store.
Riepilogo
Ha imparato a comporre gli store:
- Richiami un altro store composable all'interno di un'azione per accedere a più store.
- Gli store di tipo setup usano una funzione: i ref sono lo stato, i computed sono i getter e le funzioni sono le azioni.
- Restituisca tutto ciò che desidera rendere disponibile.
- Richiami gli store all'interno delle funzioni, quando servono, per evitare dipendenze circolari.
Domande Frequenti
La lezione «Composizione degli store e accesso tra store» è gratuita?
Sì — il testo completo di «Composizione degli store e accesso tra store» è 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 4 lezioni in totale.
Cosa imparerò in «Composizione degli store e accesso tra store»?
Utilizzo di uno store all'interno di un altro, modelli di composizione degli store, prevenzione delle dipendenze circolari. 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 4.
Quanto tempo richiede la lezione «Composizione degli store e accesso tra store»?
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
- Pinia vs Vuex: perché effettuare il passaggio
- defineStore: stato, getter, action
- Composizione degli store e accesso tra store
- Persistenza e devtools di Pinia