Introduction

Pinia est la bibliothèque officielle de gestion d’état pour Vue 3. Elle permet de centraliser des données et de les partager facilement entre plusieurs composants, tout en gardant une structure claire, modulaire et réactive.

Dans le cadre d’un projet comme le Pokédex, où plusieurs pages ont besoin d’accéder aux mêmes informations (liste de Pokémon, types...), Pinia évite de charger les données plusieurs fois et simplifie la communication entre composants.

Le problème : le prop drilling

Sans store, les données sont piégées dans les composants. Imaginez :

• index.vue appelle fetch() pour afficher la liste des Pokémon
• pokemon/[id].vue appelle encore fetch() pour afficher le détail
• Si on ajoute une page favoris, il faut un troisième fetch()

C’est du gaspillage : les mêmes données sont téléchargées plusieurs fois.

On pourrait remonter les données dans App.vue et les redescendre via des props, mais cette approche (appelée prop drilling) devient vite lourde :

• les composants sont éloignés dans l’arborescence,
• plusieurs composants doivent accéder aux mêmes données,
• les props doivent traverser des composants intermédiaires qui n’en ont pas besoin.

La solution : un store centralisé

Un store est un module indépendant qui charge les données une seule fois et les rend accessibles à tous les composants :

App.vue → init() → pokemonStore ← index.vue
                                 ← pokemon/[id].vue
                                 ← favoris.vue

Le store contient trois parties :

Partie	Rôle	Équivalent dans un composant
state	Les données brutes	ref()
getters	Données calculées (lecture seule)	computed()
actions	Fonctions qui modifient le state	Fonctions classiques

Ces éléments sont définis dans un fichier unique (par exemple pokemonStore.js) et peuvent ensuite être utilisés partout dans l’application.

Exemple concret

Dans le Pokédex, le store permet de :

• charger les Pokémon et les types une seule fois au démarrage,
• partager les données entre la page d’accueil et la page de détail,
• gérer les états de chargement (isLoading) et d’erreur (error),
• plus tard : gérer les favoris et la persistance avec localStorage.

Dans les prochains chapitres, nous verrons comment créer ce store, comment l’utiliser dans les composants, et comment destructurer ses données sans perdre la réactivité avec storeToRefs().