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.

INFO

Les données des Pokémons sont récupérées depuis une API locale à l'aide d'axios et stockées dans le store Pinia.

js
async init () {
    console.log('🚀 Initialisation du store Pokémon...')

    this.isLoading = true

    try {
        // Les fonctions fetchTypes et fetchPokemons sont des actions définies dans le store
        // Elles récupèrent les données depuis l'API et les stockent dans le state
        await Promise.all([
            this.fetchTypes({ withLoader: false }),
            this.fetchPokemons({ withLoader: false }),
        ])

        // Charger les favoris sauvegardés dans le navigateur
        this.loadFavorites()

        console.log('✅ Store Pokémon initialisé')
    } catch (error) {
        console.error('❌ Erreur lors de l\'initialisation du store Pokémon:', error)
    } finally {
        this.isLoading = false
    }

    console.log('ℹ️ Les requêtes utilisent maintenant la configuration axios globale')
},

👉 Voir : Créer un store Pokémon

👉 Voir : Accéder au state

👉 Voir : Consommer une API - Couplage avec pinia

📦 À 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.