Getters – Accès intelligent aux données

Les getters sont des fonctions qui permettent de lire ou filtrer intelligemment les données du state.
Ils sont réactifs, et s’utilisent comme des propriétés.

Exemple dans le Pokédex

Voici quelques getters utilisés dans notre store pokemonStore :

getters: {
  totalPokemons: (state) => state.pokemons.length,

  getFavorites: (state) => {
    return state.pokemons.filter(p => state.favorites.includes(p.id))
  },

  isFavorite: (state) => {
    return (pokemon) => state.favorites.includes(pokemon.id)
  }
}

• totalPokemons donne le nombre total de Pokémon.
• getFavorites renvoie un tableau de Pokémon favoris.
• isFavorite(pokemon) vérifie si un Pokémon est dans les favoris.

Utilisation dans un composant

Une fois le store importé, on peut utiliser les getters comme des propriétés :

const pokemonStore = usePokemonStore()

console.log(pokemonStore.totalPokemons)
const favoris = pokemonStore.getFavorites

Et même dans un v-for :

<v-card
  v-for="pokemon in pokemonStore.getFavorites"
  :key="pokemon.id"
>
  {{ pokemon.name }}
</v-card>

Getters avec paramètres

Certains getters, comme isFavorite, acceptent un paramètre.
Ils doivent être écrits sous forme de fonction retournant une fonction :

isFavorite: (state) => (pokemon) => state.favorites.includes(pokemon.id)

👉 Lire le chapitre 6 – Actions