Komponera stores och komma åt andra stores
Använd en store i en annan, mönster för store-komposition och undvik cirkulära beroenden.
Komponera stores och komma åt andra stores är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Stores kan använda andra stores
Verkliga appar har flera stores som behöver varandra. En cart-store kan behöva auth-storen för att känna till den aktuella användaren. Pinia gör åtkomst mellan stores enkel.
Anropa en store inuti en action
Inuti en action anropar ni helt enkelt den andra store-composablen. Eftersom actions körs efter att Pinia har aktiverats är detta säkert.
import { useAuthStore } from './auth'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
checkout() {
const auth = useAuthStore()
if (!auth.isLoggedIn) return
// proceed with auth.userId
}
}
})Syntaxen för setup stores
Förutom ett optionsobjekt accepterar defineStore även en setup-funktion. Den liknar setup i en komponent: deklarera refs och computed-värden och returnera dem sedan.
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})State som refs
I en setup store blir varje ref eller reactive som ni returnerar en del av state. Använd ref för primitiva värden och reactive för objekt.
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})Getters som computed
Ett returnerat computed-värde fungerar som en getter. Det cachas och är reaktivt, precis som getters i option stores.
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})Actions som funktioner
En returnerad funktion är en action. Den kan läsa och skriva refs direkt med hjälp av .value.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Returnera refs och computed
Den viktigaste regeln för setup stores är: returnera allt ni vill exponera. Allt som inte returneras förblir privat i storen.
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})Mellan stores i en setup store
I en setup store kan ni anropa en annan store på toppnivå och använda den i computed-värden eller actions.
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})Undvik cirkulära beroenden
Om store A importerar store B och B importerar A kan ni få ett cirkulärt beroende. Undvik att anropa den andra storen på modulens toppnivå. Anropa den i stället inuti den action eller getter där den behövs.
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}Varför lata anrop hjälper
Genom att anropa store-composablen inuti en funktion skjuter ni upp upplösningen tills körningen, efter att alla moduler har laddats. Då bryts importcykeln som annars kraschar under modulutvärderingen.
Option stores jämfört med setup stores
Båda stilarna har samma möjligheter. Välj option stores för en välbekant, deklarativ struktur och setup stores när ni vill ha full flexibilitet i Composition API, till exempel watchers eller composables inuti storen.
Snabbtest
Testa din förståelse av hur stores sätts samman.
Sammanfattning
Du har lärt dig att sätta samman stores:
- Anropa en annan store-composable i en action för åtkomst mellan stores.
- Setup-stores använder en funktion: refs är state, computed är getters och funktioner är actions.
- Returnera allt du vill exponera.
- Anropa stores vid behov inuti funktioner för att undvika cirkulära beroenden.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Komponera stores och komma åt andra stores” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Komponera stores och komma åt andra stores”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Komponera stores och komma åt andra stores”?
Använd en store i en annan, mönster för store-komposition och undvik cirkulära beroenden. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Komponera stores och komma åt andra stores”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Pinia kontra Vuex: Därför byter man
- defineStore: State, getters och actions
- Komponera stores och komma åt andra stores
- Persistens och devtools i Pinia