Pinia pour Vue : defineStore et storeToRefs
Définissez un store Pinia avec defineStore, accédez-y dans les composants et utilisez storeToRefs pour conserver la réactivité lors de la déstructuration de l’état.
Pinia pour Vue : defineStore et storeToRefs est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que Pinia ?
Pinia est la bibliothèque officielle de gestion d'état pour Vue 3. Elle remplace Vuex par une API plus simple, sûre du point de vue des types, intégrée à DevTools et proche de l'API de composition.
Installer Pinia
Installez et enregistrez le plugin Pinia avec l'app Vue.
npm install pinia
// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');defineStore — Style de l'API de composition
defineStore crée un store. Le style de l'API de composition utilise directement ref, computed et les fonctions, comme un composable.
// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() { count.value++; }
return { count, doubled, increment };
});defineStore — Style de l'API des options
Le style des options reprend l'API des options de Vue : state() pour les données réactives, les accesseurs (comme computed) et les actions (comme les méthodes).
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
doubled: (state) => state.count * 2,
},
actions: {
increment() { this.count++; },
async fetchAndSet(id: string) {
this.count = await fetchCount(id);
}
}
});Utiliser un store dans un composant
Appelez la fonction du store dans setup(). Le store est un objet réactif : vous pouvez lire son état et appeler directement ses actions.
<script setup>
import { useCounterStore } from '@/stores/counter';
const store = useCounterStore();
</script>
<template>
<p>{{ store.count }}</p>
<button @click="store.increment">+</button>
</template>storeToRefs — Déstructurer en toute sécurité
La déstructuration directe d'un store fait perdre leur réactivité à l'état et aux accesseurs, qui deviennent de simples valeurs. Utilisez storeToRefs() pour les déstructurer de manière réactive.
import { storeToRefs } from 'pinia';
const store = useCounterStore();
// Actions can be destructured normally (they're functions):
const { increment } = store;
// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);$patch — Mises à jour groupées
store.$patch() applique plusieurs modifications de l'état en une seule opération. Cette fonction est utile pour regrouper des mises à jour liées.
store.$patch({
count: 10,
name: 'Updated'
});
// Or with a function for complex logic:
store.$patch(state => {
state.items.push(newItem);
state.total += newItem.price;
});$subscribe — Surveiller les modifications du store
store.$subscribe(callback) réagit à toute mutation du store, comme watch de Vue, mais pour le store entier.
Plugins Pinia
Les plugins Pinia étendent chaque store. Usages courants : conserver l'état dans localStorage, ajouter une journalisation de débogage ou injecter des services.
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);Pinia DevTools
Pinia s’intègre à Vue DevTools. Vous pouvez inspecter l’état du store, voir quelles actions ont été appelées et naviguer dans le temps entre les instantanés d’état.
Plusieurs stores
Créez un store par domaine (useAuthStore, useCartStore, useNotificationStore). Les stores peuvent s’importer et s’utiliser les uns les autres. La structure plate de Pinia (sans modules imbriqués) simplifie cette organisation.
Vérification rapide
Pourquoi devez-vous utiliser storeToRefs() lorsque vous déstructurez un store Pinia ?
Récapitulatif : Pinia
defineStore crée des stores. Style de l’API Composition ou de l’API Options. Accédez-y avec le hook useXxxStore(). Utilisez storeToRefs() pour une déstructuration réactive. $patch() pour regrouper les mises à jour. Des plugins pour la persistance et d’autres extensions. Intégration à DevTools. Un store par domaine — pas de modules imbriqués comme avec Vuex.
Questions Fréquemment Posées
La leçon « Pinia pour Vue : defineStore et storeToRefs » est-elle gratuite ?
Oui — le texte complet de « Pinia pour Vue : defineStore et storeToRefs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Pinia pour Vue : defineStore et storeToRefs » ?
Définissez un store Pinia avec defineStore, accédez-y dans les composants et utilisez storeToRefs pour conserver la réactivité lors de la déstructuration de l’état. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Pinia pour Vue : defineStore et storeToRefs » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Redux Toolkit : createSlice et configureStore
- Zustand pour un état React léger
- Pinia pour Vue : defineStore et storeToRefs
- Quand utiliser un état global ou local