DEV {JS}

Mode sombre

Étape 6 – Se connecter au magasin Pinia ​

🎯 Objectifs de l’étape ​

Dans cette étape, vous allez connecter la page d’accueil à Pinia, le système de gestion d’état de Vue.js.

Vous apprendrez à :

  • importer un store Pinia dans un composant Vue,
  • accéder aux données partagées stockées dans le pokemonStore,
  • utiliser la console du navigateur pour explorer les données.

🧾 Qu’est-ce que Pinia ? ​

Pinia est une bibliothèque officielle pour gérer l’état partagé dans les applications Vue.
Elle permet de centraliser des données (comme la liste des Pokémon) et de les rendre accessibles dans n’importe quel composant.

👉 Lire : Introduction à Pinia

Dans ce projet, un store pokemonStore est déjà configuré. Il contient :

  • la liste complète des Pokémon,
  • les types de Pokémon,
  • les favoris,
  • des actions pour ajouter, modifier, supprimer des Pokémon.

👉 Voir : Créer un store Pokémon
👉 Voir : Accéder au state

📦 À faire dans index.vue ​

  1. Importer le store dans la section <script setup> :
js
import {usePokemonStore} from '@/stores/pokemonStore'
  1. Initialiser le store en appelant la fonction :
js
const pokemonStore = usePokemonStore()
  1. Afficher les données dans la console pour vérifier :
js
console.log(pokemonStore.pokemons)

🔍 Tester dans le navigateur ​

  1. Ouvrez la page d’accueil sur http://localhost:3000/
  2. Ouvrez les outils de développement du navigateur (F12)
  3. Regardez la console : vous devriez voir une liste de Pokémon (tableau d’objets)

✅ Résultat attendu ​

À ce stade :

  • Le fichier index.vue est connecté au store Pinia ✅
  • Vous pouvez accéder aux données partagées ✅
  • Aucune donnée n’est encore affichée à l’écran (ça viendra à l’étape suivante)

📘 Documentation utile ​

💡 Astuce bonus ​

Pour explorer le contenu d’un store Pinia dans la console :

js
Object.keys(pokemonStore)

ou encore

js
console.table(pokemonStore.pokemons)

Cela vous permet de mieux comprendre la structure des données.