Exercices Pinia
10 exercices progressifs pour maîtriser le state management avec Pinia.
defineStore basique
Tâche : Créez un store Pinia nommé 'counter' avec defineStore. Ajoutez un state avec count: 0 et titre: 'Mon compteur'. Branchez Pinia sur une app Vue.
State réactif — modifier depuis l'app
Tâche : Créez un store avec theme, langue et notifications. Dans un composant, modifiez directement ces propriétés via store.theme = 'light' (mutation directe Pinia).
Getter computed — total à partir du state
Tâche : Créez un store cart avec items (tableau de { nom, prix, qte }). Ajoutez un getter totalHT qui calcule la somme de prix * qte.
Action mutation — modifier state via action
Tâche : Ajoutez des actions increment(), decrement() et reset() au store compteur. Dans les actions, utilisez this.count pour modifier l'état.
Action async — fetch simulé
Tâche : Créez un store posts avec posts, loading et error. Ajoutez une action async fetchPosts() qui simule un délai avec await new Promise(...) puis remplit les posts.
storeToRefs — déstructurer sans perdre la réactivité
Tâche : Dans un composant, utilisez storeToRefs(store) pour déstructurer count et double depuis le store. Déstructurez les actions increment et reset directement depuis store (pas storeToRefs).
Store composition — un store depuis un autre
Tâche : Créez useAuthStore et useProfileStore. Dans une action de useProfileStore, appelez useAuthStore() pour vérifier si l'utilisateur est connecté avant de charger le profil.
Plusieurs stores — counterStore + userStore
Tâche : Créez deux stores séparés : useCounterStore (state: count, actions: increment/reset) et useUserStore (state: nom/email, getter: affichage). Utilisez les deux dans un même composant App.
Store persisté — save/load localStorage
Tâche : Créez un store avec des actions sauvegarder() et charger(). Utilisez localStorage.setItem() avec JSON.stringify() pour sauvegarder, et JSON.parse() pour restaurer au chargement.
Store complet — state + getters + actions + persistence
Tâche : Créez un store Todo complet : state (todos, filtre), getters (todosFiltres, nbRestants), actions (ajouter, basculer, supprimer) et persistance localStorage.
Passer le QCM V08