Vue Academy · Leçon

Mutations et actions

Modifiez l’état avec des mutations et des actions asynchrones

Mutations et actions est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Modifier state en toute sécurité

Dans Vuex, vous ne modifiez jamais directement state depuis un composant. À la place, toutes les modifications passent par les mutations. Ce chemin unique et explicite rend chaque modification de state traçable et facile à déboguer dans Vue DevTools.

Qu’est-ce qu’une mutation ?

Une mutation est une fonction synchrone qui reçoit state et le modifie. Les mutations sont le seul endroit où state peut être modifié.

mutations: {
  increment(state) {
    state.count++
  }
}

Les mutations doivent être synchrones

Les mutations doivent s’exécuter de manière synchrone. Si vous placez du code asynchrone (comme un appel réseau) dans une mutation, DevTools ne peut pas déterminer à quel moment state a réellement changé, ce qui interrompt le débogage dans le temps.

Valider une mutation

Pour exécuter une mutation, vous la validez par son nom depuis un composant en utilisant this.$store.commit.

methods: {
  add() {
    this.$store.commit("increment")
  }
}

Transmettre une charge utile

Les mutations acceptent un argument supplémentaire appelé charge utile, qui vous permet de transmettre des données à la modification.

mutations: {
  incrementBy(state, amount) {
    state.count += amount
  }
}

// commit with payload
this.$store.commit("incrementBy", 5)

Charges utiles sous forme d’objet

Pour plusieurs valeurs, transmettez une charge utile sous forme d’objet. Cette approche est plus claire et plus souple que des arguments positionnels.

mutations: {
  setUser(state, payload) {
    state.user = { id: payload.id, name: payload.name }
  }
}

this.$store.commit("setUser", { id: 1, name: "Ada" })

Qu'est-ce qu'une action ?

Une action gère le travail asynchrone et la logique métier. Les actions ne modifient pas directement l'état ; elles déclenchent plutôt des mutations. Le code asynchrone reste ainsi séparé de la modification effective de l'état.

Définir une action

Une action reçoit un objet contexte. Vous pouvez en extraire commit pour déclencher des mutations ou accéder à l'état.

actions: {
  async fetchUser(context, userId) {
    const res = await fetch("/api/users/" + userId)
    const data = await res.json()
    context.commit("setUser", data)
  }
}

Déstructurer le contexte

Il est courant d'extraire directement commit du contexte pour alléger l'écriture.

actions: {
  async loadTodos({ commit }) {
    commit("setLoading", true)
    const res = await fetch("/api/todos")
    commit("setTodos", await res.json())
    commit("setLoading", false)
  }
}

Déclencher une action

Les composants déclenchent des actions avec this.$store.dispatch et peuvent leur transmettre une charge utile facultative. Le déclenchement renvoie une promesse pour les actions asynchrones.

methods: {
  async load() {
    await this.$store.dispatch("loadTodos")
  }
}

Le flux complet

Le cycle complet est le suivant : un composant déclenche une action, l'action effectue un travail asynchrone et déclenche une mutation, puis la mutation modifie l'état. L'état réactif met ensuite automatiquement l'interface à jour.

Vérification rapide

Vérifiez vos connaissances sur les mutations et les actions.

Récapitulatif

L'état ne change que par l'intermédiaire des mutations, qui sont synchrones et déclenchées avec commit. La logique asynchrone se trouve dans les actions, déclenchées avec dispatch, qui déclenchent des mutations lorsqu'elles sont prêtes. Toutes deux acceptent des charges utiles pour transmettre des données. Vous allez maintenant ajouter des accesseurs et répartir le store en modules.

Questions Fréquemment Posées

La leçon « Mutations et actions » est-elle gratuite ?

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

Qu'est-ce que j'apprendrai dans « Mutations et actions » ?

Modifiez l’état avec des mutations et des 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 3.

Combien de temps prend la leçon « Mutations 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

← Retour à Vue Academy