CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3

Accéder à l'état du store dans les composants VueJS

Retour à la formation
Chapitre 5 Leçon 3
Précédent
Suivant

Découvrez comment afficher la valeur du state dans les composants VueJS en utilisant store.state et this.$store.

Détails de la leçon

Description de la leçon

Cette vidéo vous présente deux techniques essentielles pour accéder à l'état du store dans les composants VueJS. La première méthode consiste à utiliser store.state pour récupérer directement la valeur du state depuis le store. En insérant un console.log, vous pouvez vérifier si cette valeur est accessible dans votre composant. Cette méthode est testée et confirmée comme fonctionnelle.

La seconde méthode met en avant l'utilisation de this.$store, ce qui permet à tous les composants enfants d'une application VueJS d'accéder au store. Vous aurez l'opportunité d'expérimenter cette technique par vous-même en affichant les valeurs avant et après la mise à jour du store. La démonstration inclut des exemples concrets avec des composants Vente et Réappro.

En conclusion, ces deux approches vous offrent des moyens robustes pour travailler avec l'état du store, simplifiant ainsi la gestion de vos données dans une application VueJS.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Montrer comment accéder au state du store directement depuis un composant VueJS.
  • Illustrer l'utilisation de store.state et this.$store.
  • Fournir un exercice pratique pour renforcer l'apprentissage.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir :

  • Des connaissances de base en VueJS.
  • Compris les concepts de state management avec VueX.

Métiers concernés

Les métiers et usages professionnels associés à ce sujet incluent :

  • Développeur Frontend
  • Ingénieur en développement d'applications web
  • Spécialiste en UX/UI

Alternatives et ressources

Des alternatives à VueX pour la gestion de state incluent :

  • Pinia
  • Redux (principalement utilisé avec React)
  • MST (MobX-State-Tree)

Questions & Réponses

La première méthode consiste à utiliser store.state pour accéder directement à la valeur du state.
Les composants enfants de VueJS peuvent accéder au store en utilisant this.$store.
Il faut vérifier si la valeur du state est bien accessible dans le composant en utilisant console.log.