Créer un store Pokémon

Maintenant que Pinia est installé, voyons comment créer un premier store dans le projet.

Un store, c’est un fichier dans lequel on centralise les données qu’on veut partager dans toute l’application.
Dans notre Pokédex, ce sera par exemple la liste des Pokémon, leurs types, ou les favoris.

Emplacement du fichier

Dans le dossier src/stores, créez un fichier appelé :

pokemonStore.js

Structure du store

À l’intérieur, on commence par importer defineStore, la fonction principale de Pinia.
Ensuite, on lui donne un nom — ici "pokemon" — et on lui fournit trois parties :

• le state pour les données,
• les getters pour lire les données intelligemment,
• et les actions pour les modifier.

Voici un exemple simplifié inspiré du Pokédex :

import { defineStore } from 'pinia'

export const usePokemonStore = defineStore('pokemon', {
  state: () => ({
    pokemons: [],
    favorites: [],
  }),

  getters: {
    totalPokemons: (state) => state.pokemons.length,
    getFavorites: (state) => {
      return state.pokemons.filter(p => state.favorites.includes(p.id))
    }
  },

  actions: {
    toggleFavorite(pokemon) {
      const index = this.favorites.indexOf(pokemon.id)
      if (index === -1) {
        this.favorites.push(pokemon.id)
      } else {
        this.favorites.splice(index, 1)
      }
    }
  }
})

Résumé

Ce store contient :

• un tableau de pokemons,
• un tableau d’identifiants favorites,
• un getter pour afficher le nombre total de Pokémon,
• un autre pour récupérer uniquement les favoris,
• une action toggleFavorite pour en ajouter ou retirer.

Ce fichier peut ensuite être utilisé dans n’importe quel composant de l’application Vue.

👉 Lire le chapitre 4 – Les données (state)