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 ou composants ont besoin d’accéder aux mêmes informations (ex. liste de Pokémon, favoris, types...), Pinia devient un outil très pratique, voire indispensable.

Pourquoi ne pas tout stocker directement dans les composants Vue ?

On pourrait stocker les données dans un composant parent et les transmettre à ses enfants via des props, mais cette approche devient vite lourde et peu lisible si :

• les composants sont éloignés dans l’arborescence,
• plusieurs composants doivent accéder ou modifier les mêmes données,
• les données doivent persister entre plusieurs pages.

Qu’est-ce qu’un store Pinia ?

Un store est un module indépendant qui contient trois choses :

• state : les données à centraliser,
• getters : des accès intelligents à ces données (comme des propriétés calculées),
• actions : des fonctions pour modifier les données.

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, on utilise un store pour :

• stocker les Pokémon et leurs types,
• gérer les favoris,
• ajouter, modifier ou supprimer des Pokémon,
• garder les données même après avoir fermé le navigateur (grâce à localStorage).

---

Dans les prochains chapitres, nous verrons comment mettre en place ce store, comment l’utiliser, et quelles sont les bonnes pratiques à connaître pour vos projets.