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 la liste des Pokémon, leurs types, et les états de chargement.

Emplacement du fichier

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

pokemonStore.js

Convention de nommage

Le nom du composable commence toujours par use et se termine par Store : usePokemonStore. C’est une convention Pinia à respecter dans votre projet perso (ex : useMovieStore, useRecipeStore).

Structure du store

On importe defineStore, la fonction principale de Pinia, puis on lui donne un nom — ici "pokemon" — et on lui fournit trois parties :

import { defineStore } from ‘pinia’

export const usePokemonStore = defineStore(‘pokemon’, {
  state: () => ({
    pokemons: [],
    types: [],
    isLoading: false,
    error: null,
  }),

  getters: {
    totalPokemons: (state) => state.pokemons.length,
    getPokemonById: (state) => {
      return (pokemonId) => state.pokemons.find(p => p.id === pokemonId)
    },
  },

  actions: {
    async fetchPokemons() {
      const response = await fetch(‘http://localhost:3535/pokemons’)
      if (!response.ok) {
        throw new Error(`Erreur HTTP : ${response.status}`)
      }
      this.pokemons = await response.json()
    },

    async fetchTypes() {
      const response = await fetch(‘http://localhost:3535/types’)
      if (!response.ok) {
        throw new Error(`Erreur HTTP : ${response.status}`)
      }
      this.types = await response.json()
    },

    async init() {
      this.isLoading = true
      this.error = null
      try {
        await Promise.all([
          this.fetchPokemons(),
          this.fetchTypes(),
        ])
      } catch (error) {
        this.error = ‘Erreur lors du chargement des données’
        console.error(error)
      } finally {
        this.isLoading = false
      }
    },
  },
})

Résumé

Ce store contient :

• un tableau pokemons et un tableau types (chargés depuis l’API),
• isLoading et error pour gérer les états de chargement,
• un getter totalPokemons pour le nombre total,
• un getter getPokemonById pour retrouver un Pokémon par son ID,
• des actions fetchPokemons(), fetchTypes() et init() pour charger les données en parallèle.

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

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