Les données (state)

Le state d’un store Pinia contient les données centrales de votre application. Ce sont elles que vous allez afficher, trier, filtrer, modifier...

Exemple dans le Pokédex

Voici le state du store Pokédex :

state: () => ({
  pokemons: [],
  types: [],
  isLoading: false,
  error: null,
})

Propriété	Type	Valeur initiale	Rôle
pokemons	Array	[]	Liste de tous les Pokémon
types	Array	[]	Types de Pokémon (Feu, Eau, etc.)
isLoading	Boolean	false	true pendant les appels API
error	String|null	null	Message d’erreur éventuel

Toujours initialiser chaque propriété

Même si le tableau sera rempli plus tard par une action, on l’initialise à []. Même si error est vide au départ, on l’initialise à null. Cela permet à Vue de rendre ces propriétés réactives dès le début.

Accéder au state dans un composant

Pour utiliser les données du store, on l’importe et on y accède directement :

import { usePokemonStore } from ‘@/stores/pokemonStore’

const pokemonStore = usePokemonStore()

console.log(pokemonStore.pokemons)    // Affiche le tableau de Pokémon
console.log(pokemonStore.isLoading)   // true ou false

Dans le template :

<p>Nombre de Pokémon : {{ pokemonStore.pokemons.length }}</p>
<p v-if="pokemonStore.isLoading">Chargement...</p>
<p v-if="pokemonStore.error" class="text-red">{{ pokemonStore.error }}</p>

Destructurer avec storeToRefs()

Si on veut destructurer les propriétés du store, il faut utiliser storeToRefs() pour garder la réactivité :

import { storeToRefs } from ‘pinia’

// ❌ MAUVAIS — pokemons n’est plus réactif
const { pokemons } = pokemonStore

// ✅ BON — pokemons reste réactif
const { pokemons, isLoading, error } = storeToRefs(pokemonStore)

Règle simple : storeToRefs() pour le state et les getters, destructuration directe pour les actions (ce sont des fonctions, pas des données réactives).

Modifier les données

Il est déconseillé de modifier le state directement dans les composants.

// ❌ À éviter
pokemonStore.pokemons.push(newPokemon)

// ✅ Utiliser une action
pokemonStore.addPokemon(newPokemon)

Les actions garantissent que la logique métier reste dans le store, pas éparpillée dans les composants.

👉 Lire le chapitre 5 – Getters