Vue Academy · Leçon

Getters et modules

Calculez l’état dérivé et organisez le store en modules

Getters et modules est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. 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 3 leçons au total.

État calculé avec des accesseurs

Vous avez parfois besoin d'un état dérivé, comme une liste filtrée ou un décompte. Un accesseur est l'équivalent, dans le store, d'une propriété calculée : il dérive une valeur de l'état et met le résultat en cache jusqu'à ce que ses dépendances changent.

Définir un accesseur

Un accesseur est une fonction qui reçoit l'état et renvoie une valeur dérivée.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  }
}

Accesseurs utilisant d'autres accesseurs

Un accesseur reçoit un deuxième argument contenant tous les autres accesseurs, ce qui vous permet de les composer.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  },
  completedCount(state, getters) {
    return getters.completedTodos.length
  }
}

Accéder aux accesseurs

Lisez les accesseurs avec this.$store.getters dans une propriété calculée.

computed: {
  doneCount() {
    return this.$store.getters.completedCount
  }
}

Accesseurs de type méthode

Renvoyez une fonction depuis un accesseur pour lui transmettre des arguments. Notez que les accesseurs de type méthode ne sont pas mis en cache et s'exécutent à chaque appel.

getters: {
  todoById: (state) => (id) => {
    return state.todos.find(t => t.id === id)
  }
}

// usage
this.$store.getters.todoById(3)

L'assistant mapGetters

Comme mapState, l'assistant mapGetters transforme automatiquement les accesseurs en propriétés calculées.

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters(["completedTodos", "completedCount"])
  }
}

Pourquoi répartir le store en modules ?

Un store unique et volumineux devient difficile à maintenir. Vuex vous permet de répartir le store en modules, chacun possédant son propre état, ses mutations, ses actions et ses accesseurs, afin de regrouper la logique associée.

Définir un module

Un module est simplement un objet contenant les mêmes options qu'un store. Vous enregistrez les modules sous la clé modules.

const cart = {
  state: () => ({ items: [] }),
  mutations: {
    addItem(state, item) { state.items.push(item) }
  },
  getters: {
    itemCount: (state) => state.items.length
  }
}

Enregistrer des modules

Regroupez les modules dans le store racine sous modules. Chaque clé devient le nom du module.

import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"

export const store = createStore({
  modules: { cart, user }
})

Espace de noms des modules

Définissez namespaced: true pour donner à un module sa propre portée. Cela évite les conflits de noms entre les modules et rend la structure explicite.

const cart = {
  namespaced: true,
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length
  }
}

Accéder aux modules avec espace de noms

Avec un espace de noms, ajoutez le nom du module en préfixe lorsque vous déclenchez des mutations ou des actions, ou lorsque vous lisez des accesseurs.

// module state lives under the module key
this.$store.state.cart.items

// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")

Vérification rapide

Vérifiez vos connaissances sur les accesseurs et les modules.

Récapitulatif

Les accesseurs dérivent des valeurs mises en cache à partir de l'état ; vous y accédez avec this.$store.getters ou mapGetters. Les modules divisent un store volumineux en unités spécialisées ; définir namespaced: true leur attribue une portée, et vous adressez leurs membres avec un préfixe module/name. Vous disposez maintenant de tous les outils Vuex : état, mutations, actions, accesseurs et modules.

Questions Fréquemment Posées

La leçon « Getters et modules » est-elle gratuite ?

Oui — le texte complet de « Getters et modules » 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 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Getters et modules » ?

Calculez l’état dérivé et organisez le store en modules 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 3 sur 3.

Combien de temps prend la leçon « Getters et modules » ?

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

← Retour à Vue Academy