DEV {JS}

Mode sombre

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 un extrait simple du state dans notre store :

js
state: () => ({
  pokemons: [],
  favorites: [],
  types: []
})
  • pokemons contient tous les Pokémon à afficher dans la grille,
  • favorites est une liste d’ID représentant les Pokémon favoris,
  • types contient la liste des types (Feu, Eau, etc.).

Accéder au state dans un composant ​

Pour utiliser ces données dans un composant Vue, il suffit d’importer le store, puis d’y accéder comme à n’importe quel objet :

js
const pokemonStore = usePokemonStore()

console.log(pokemonStore.pokemons)       // Affiche le tableau de Pokémon
console.log(pokemonStore.favorites)      // Affiche les ID favoris

Dans le template :

vue
<p>Nombre de Pokémon : {{ pokemonStore.pokemons.length }}</p>

Modifier les données ​

Même si c’est possible, il est déconseillé de modifier les données directement dans le state.

Exemple à éviter :

js
pokemonStore.pokemons.push(newPokemon)

Il vaut mieux utiliser une action, prévue à cet effet (comme addPokemon()).

👉 Lire le chapitre 5 – Getters