Composer des stores et accéder à plusieurs stores
Utilisation d’un store dans un autre, modèles de composition entre stores et prévention des dépendances circulaires
Composer des stores et accéder à plusieurs stores est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Les gestionnaires d’état peuvent en utiliser d’autres
Les applications réelles comportent plusieurs gestionnaires d’état qui doivent interagir. Un gestionnaire du panier peut avoir besoin du gestionnaire auth pour connaître l’utilisateur actuel. Pinia rend l’accès entre gestionnaires d’état simple.
Accéder à un gestionnaire dans une action
Dans une action, appelez simplement la fonction composable de l’autre gestionnaire d’état. Comme les actions s’exécutent une fois Pinia activé, cette pratique est sûre.
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 syntaxe du gestionnaire de configuration
En plus de l’objet d’options, defineStore accepte une fonction de configuration. Elle ressemble à la fonction de configuration d’un composant : déclarez des références et des valeurs calculées, puis renvoyez-les.
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})L’état sous forme de références
Dans un gestionnaire de configuration, chaque ref ou reactive que vous renvoyez devient un élément de l’état. Utilisez ref pour les valeurs primitives et reactive pour les objets.
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})Les accesseurs sous forme de valeurs calculées
Une valeur computed renvoyée agit comme un accesseur. Elle est mise en cache et réactive, comme les accesseurs des gestionnaires fondés sur les options.
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})Les actions sous forme de fonctions
Une fonction renvoyée est une action. Elle peut lire et modifier directement les références à l’aide de .value.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Renvoyer les références et les valeurs calculées
La règle essentielle des gestionnaires de configuration est la suivante : renvoyez tout ce que vous souhaitez exposer. Tout ce qui n’est pas renvoyé reste privé au sein du gestionnaire d’état.
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})Accès inter-gestionnaires dans un gestionnaire de configuration
Dans un gestionnaire de configuration, vous pouvez appeler un autre gestionnaire au niveau supérieur et l’utiliser dans des valeurs calculées ou des actions.
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})Éviter les dépendances circulaires
Si le gestionnaire A importe le gestionnaire B et que B importe A, vous pouvez rencontrer une dépendance circulaire. Évitez d’appeler l’autre gestionnaire au niveau supérieur du module ; appelez-le plutôt à l’intérieur de l’action ou de l’accesseur où il est nécessaire.
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}Pourquoi les appels différés sont utiles
Appeler la fonction composable du gestionnaire à l’intérieur d’une fonction reporte la résolution à l’exécution, après le chargement de tous les modules. Cela rompt le cycle d’importation qui provoque un plantage lors de l’évaluation du module.
Gestionnaires fondés sur les options ou sur la configuration
Les deux styles sont aussi puissants l’un que l’autre. Choisissez les gestionnaires fondés sur les options pour une forme déclarative familière ; choisissez les gestionnaires fondés sur la configuration lorsque vous souhaitez toute la souplesse de l’API de composition, comme les observateurs ou les fonctions composables au sein du gestionnaire d’état.
Vérification rapide
Vérifiez votre compréhension de la composition des stores.
Récapitulatif
Vous avez appris à composer des stores :
- Appelez le composable d’un autre store dans une action pour accéder à plusieurs stores.
- Les stores de configuration utilisent une fonction : les références constituent l’état, les valeurs calculées les accesseurs et les fonctions les actions.
- Renvoyez tout ce que vous souhaitez exposer.
- Appelez les stores à la demande dans les fonctions pour éviter les dépendances circulaires.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Composer des stores et accéder à plusieurs stores » est-elle gratuite ?
Oui — le texte complet de « Composer des stores et accéder à plusieurs stores » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Composer des stores et accéder à plusieurs stores » ?
Utilisation d’un store dans un autre, modèles de composition entre stores et prévention des dépendances circulaires Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Composer des stores et accéder à plusieurs stores » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Pinia ou Vuex : pourquoi changer
- defineStore : état, getters et actions
- Composer des stores et accéder à plusieurs stores
- Persistance de Pinia et DevTools