defineStore : état, getters et actions
Store avec options ou store Setup, état sous forme de fonction, getters calculés et actions asynchrones
defineStore : état, getters et actions est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Les trois piliers d’un gestionnaire d’état
Un gestionnaire fondé sur les options comporte trois parties : l’état (les données), les accesseurs (les valeurs dérivées) et les actions (les méthodes qui modifient l’état). Vous définissez les trois dans defineStore.
Définir un gestionnaire d’état
defineStore reçoit une chaîne identifiant unique et un objet d’options. Il renvoie une fonction composable, généralement nommée useXxxStore.
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
// state, getters, actions go here
})L’état est une fonction
L’option state doit être une fonction qui renvoie un objet. Cela garantit que chaque instance du gestionnaire d’état reçoit un état vierge, comme avec data() dans les composants.
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0, name: 'Coddy' })
})Lire l’état
Appelez la fonction composable du gestionnaire d’état dans setup pour obtenir une instance, puis lisez directement les propriétés de l’état. Elles sont réactives.
const counter = useCounterStore()
console.log(counter.count) // 0Les accesseurs sont des valeurs calculées
Les getters ressemblent aux propriétés computed. Chacun reçoit l’state comme premier argument et renvoie une valeur dérivée. Ils sont mis en cache.
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 2 }),
getters: {
doubled: (s) => s.count * 2
}
})Utiliser un accesseur
Accédez à un accesseur comme à une propriété, sans parenthèses. Pinia le recalcule uniquement lorsque ses dépendances changent.
const counter = useCounterStore()
console.log(counter.doubled) // 4Les accesseurs qui font référence à d’autres accesseurs
Pour utiliser un autre accesseur, faites référence à this plutôt qu’au paramètre d’état. Avec this, n’utilisez pas de fonction fléchée.
getters: {
doubled: (s) => s.count * 2,
quadrupled() {
return this.doubled * 2
}
}Les actions modifient l’état
Les actions sont des méthodes. Elles utilisent this pour lire et modifier directement l’état. Aucune validation ni distribution : appelez simplement la méthode.
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() { this.count++ },
addBy(amount) { this.count += amount }
}
})Actions asynchrones
Les actions peuvent être async. C’est ici que vous effectuez les appels à l’API : récupérez les données, puis affectez le résultat à l’état.
actions: {
async loadUser(id) {
const res = await fetch('/api/users/' + id)
this.user = await res.json()
}
}Utiliser le gestionnaire d’état dans un composant
Importez la fonction composable, appelez-la dans <script setup>, puis utilisez l’état, les accesseurs et les actions dans le modèle.
<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>
<template>
<p>{{ counter.count }} -> {{ counter.doubled }}</p>
<button @click="counter.increment()">+</button>
</template>Modifier plusieurs champs
Pour modifier plusieurs champs d’état à la fois, utilisez $patch. Cela regroupe les modifications dans une seule entrée des outils de développement.
counter.$patch({ count: 10, name: 'New' })Vérification rapide
Vérifiez vos connaissances sur la structure d’un gestionnaire fondé sur les options.
Récapitulatif
Un gestionnaire fondé sur les options comporte trois parties :
state: une fonction qui renvoie l’objet de données.getters: des valeurs dérivées mises en cache, qui reçoivent l’état (ou utilisent this).actions: des méthodes qui modifient directement l’état avec this.
Utilisez le gestionnaire d’état en appelant sa fonction composable dans la fonction de configuration.
Questions Fréquemment Posées
La leçon « defineStore : état, getters et actions » est-elle gratuite ?
Oui — le texte complet de « defineStore : état, getters et actions » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « defineStore : état, getters et actions » ?
Store avec options ou store Setup, état sous forme de fonction, getters calculés et actions asynchrones Tu pratiques Vue 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 Vue Academy ?
Aucune expérience préalable n'est requise. Vue 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 2 sur 4.
Combien de temps prend la leçon « defineStore : état, getters et actions » ?
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 Vue Academy ?
Oui. Chaque leçon Vue 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
- Pinia ou Vuex : pourquoi changer
- defineStore : état, getters et actions
- Composer des stores et accéder à plusieurs stores
- Persistance de Pinia et DevTools