Étape 8 — Transposition projet personnel (séquence 2)

Objectif

Appliquer les concepts de la séquence 2 (Pinia) à votre projet individuel.

Ce que vous avez appris

Concept	Pokédex	Votre projet
defineStore()	usePokemonStore	useVotreStore
State	pokemons, types, isLoading	Vos données principales
Getter simple	totalPokemons	Compteur de vos items
Getter avec paramètre	getPokemonById(id)	getItemById(id)
Action async	fetchPokemons(), fetchTypes()	fetchItems()
Action d'init	init() avec Promise.all	init()
storeToRefs()	Destructurer pokemons dans index.vue	Destructurer vos données
Initialisation	pokemonStore.init() dans App.vue	votreStore.init() dans App.vue

Checklist projet perso

Avant de quitter, vérifiez que votre projet individuel a :

• Un fichier store dans src/stores/ avec defineStore()
• State avec vos données principales (liste, catégories, isLoading)
• ≥ 1 getter simple (ex : compteur d'items)
• ≥ 1 getter avec paramètre (ex : getItemById)
• ≥ 1 action async qui appelle votre API avec fetch()
• Action init() appelée dans App.vue (onMounted)
• Page liste connectée au store (plus de fetch() local)
• Page détail qui utilise un getter du store
• 0 erreurs dans la console
• Commit poussé sur GitHub
• Version en ligne vérifiée (Vercel ou GitHub Pages)

Prochaine séance — Axios

La semaine prochaine, on remplacera fetch() par Axios, un client HTTP plus puissant. Vous apprendrez :

• Pourquoi Axios plutôt que fetch (intercepteurs, base URL, gestion d'erreurs)
• Configuration d'une instance Axios partagée
• Variables d'environnement (.env) pour l'URL de l'API

Préparation oral — Concepts clés de la séquence 2

Questions que vous devez savoir expliquer :

1. Qu'est-ce que Pinia ? Pinia est la bibliothèque officielle de gestion d'état pour Vue.js. Elle permet de centraliser les données partagées entre les composants dans un store.

2. Quelles sont les trois parties d'un store Pinia ? Le state (données brutes), les getters (données calculées, lecture seule) et les actions (fonctions qui modifient le state).

3. Pourquoi utiliser un store plutôt que des ref() dans chaque composant ? Pour éviter de dupliquer les appels API et les données. Le store charge une fois et partage les données avec toutes les pages. Sans store, chaque page doit re-télécharger les données.

4. Qu'est-ce que storeToRefs() et pourquoi est-ce nécessaire ? Quand on destructure un store, les propriétés perdent leur réactivité. storeToRefs() les convertit en ref pour garder la réactivité. On l'utilise uniquement pour le state et les getters, pas pour les actions.

5. Quelle est la différence entre un getter simple et un getter avec paramètre ? Un getter simple retourne directement une valeur calculée (totalPokemons). Un getter avec paramètre retourne une fonction qui prend un argument (getPokemonById(id)).

6. Où doit-on initialiser le store ? Dans App.vue (composant racine), dans onMounted. C'est le seul endroit qui s'exécute une fois au démarrage, avant que les pages ne s'affichent.