Stores combineren en toegang tussen stores
Eén store in een andere gebruiken, patronen voor store-compositie en circulaire afhankelijkheden vermijden.
Stores combineren en toegang tussen stores is een gratis Vue Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.
Stores kunnen andere stores gebruiken
Echte apps hebben meerdere stores die elkaar nodig hebben. Een winkelwagenstore heeft bijvoorbeeld de auth-store nodig om de huidige gebruiker te kennen. Pinia maakt toegang tussen stores eenvoudig.
Een store binnen een action aanroepen
Roep binnen een action gewoon de composable van de andere store aan. Omdat actions worden uitgevoerd nadat Pinia actief is, is dit veilig.
import { useAuthStore } from './auth'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
checkout() {
const auth = useAuthStore()
if (!auth.isLoggedIn) return
// proceed with auth.userId
}
}
})De syntaxis van een setup store
Naast een optieobject accepteert defineStore ook een setupfunctie. Deze lijkt op setup van een component: declareer refs en computeds en geef ze daarna terug.
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})State als refs
In een setup store wordt elke ref of reactive die je teruggeeft state. Gebruik ref voor primitieve waarden en reactive voor objecten.
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})Getters als computed
Een teruggegeven computed werkt als een getter. Deze wordt gecachet en is reactief, net als getters in een option store.
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})Actions als functies
Een teruggegeven functie is een action. Deze kan refs rechtstreeks lezen en schrijven met .value.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Refs en computed teruggeven
De belangrijkste regel voor setup stores: geef alles terug wat je beschikbaar wilt maken. Alles wat je niet teruggeeft, blijft privé binnen de store.
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})Tussen stores in een setup store
In een setup store kun je op het hoogste niveau een andere store aanroepen en deze in computeds of actions gebruiken.
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})Circulaire afhankelijkheden vermijden
Als store A store B importeert en B A importeert, kun je een circulaire afhankelijkheid krijgen. Roep de andere store niet op het hoogste moduleniveau aan; roep deze in plaats daarvan binnen de action of getter aan waar dat nodig is.
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}Waarom luie aanroepen helpen
Als je de store-composable binnen een functie aanroept, wordt het bepalen ervan uitgesteld tot runtime, nadat alle modules zijn geladen. Zo doorbreek je de importcyclus die tijdens de evaluatie van de module een crash veroorzaakt.
Option stores versus setup stores
Beide stijlen zijn even krachtig. Kies option stores voor een vertrouwde, declaratieve vorm; kies setup stores wanneer je volledige flexibiliteit van de Composition API wilt, zoals watchers of composables binnen de store.
Korte kennistoets
Test je begrip van het samenstellen van stores.
Samenvatting
Je hebt geleerd hoe je stores samenstelt:
- Roep een andere store-composable aan binnen een actie om stores te combineren.
- Setup-stores gebruiken een functie: refs zijn status, computed-eigenschappen zijn getters en functies zijn acties.
- Geef alles terug wat je beschikbaar wilt maken.
- Roep stores lui aan binnen functies om circulaire afhankelijkheden te voorkomen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “Stores combineren en toegang tussen stores” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Stores combineren en toegang tussen stores”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.
Wat leer ik in “Stores combineren en toegang tussen stores”?
Eén store in een andere gebruiken, patronen voor store-compositie en circulaire afhankelijkheden vermijden. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Stores combineren en toegang tussen stores”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vue Academy?
Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Pinia versus Vuex: waarom overstappen
- defineStore: state, getters en actions
- Stores combineren en toegang tussen stores
- Pinia-persistentie en devtools