Comment résoudre le problème « Erreur : [vuex] ne mute pas l'état du magasin vuex en dehors des gestionnaires de mutation lors de l'utilisation de vuex dans une application Vue ?

Dans les applications Vue, l'utilisation de vuex est une méthode courante de gestion d'état. Cependant, lors de l'utilisation de vuex, nous pouvons parfois rencontrer le message d'erreur suivant : "Erreur : [vuex] ne mute pas l'état du magasin vuex en dehors des gestionnaires de mutation." Que signifie ce message d'erreur ? Pourquoi ce message d'erreur apparaît-il ? Comment corriger cette erreur ? Cet article abordera ce problème en détail.

La signification de l'invite d'erreur

"Erreur : [vuex] ne mute pas l'état du magasin vuex en dehors des gestionnaires de mutation" signifie que dans vuex, l'état vuex ne peut pas être modifié directement en dehors de la fonction de mutation. En d'autres termes, lorsque nous modifions la valeur de l'état vuex (c'est-à-dire l'état) dans l'application, nous ne devons pas modifier la valeur de l'état directement, mais via la fonction de mutation.

En effet, dans Vuex, l'état est la seule source de données et est un objet réactif. Lorsque la valeur de l'état change, les composants associés seront automatiquement actualisés, réalisant ainsi des changements de données en temps réel. Si nous modifions directement la valeur de state, alors ce mécanisme réactif échouera et l'interface ne pourra pas être mise à jour.

Donc, si ce message d'erreur apparaît, cela signifie que nous avons modifié la valeur de l'état directement dans le code au lieu de la modifier via la fonction de mutation. Alors, comment éviter cette erreur ? Cela nous oblige à prêter attention à certaines règles lors de l’écriture du code.

Comment éviter cette erreur ?

Pour éviter cette erreur, vous devez suivre les deux règles suivantes :

1. La valeur de l'état ne peut être modifiée que dans la fonction mutation

La fonction mutation est une méthode spécialement utilisée pour traiter les données d'état, et elle est la partie centrale de Vuex. Lorsque nous modifions la valeur de state dans l'application, nous devons la modifier par mutation au lieu de la modifier directement.

Exemple de code :

// mutation函数用来修改state中的count值
const mutations = {
  addCount(state, num) {
    state.count += num;
  }
}

// 调用方法，修改state中的count值
this.$store.commit('addCount', 5);

2. La fonction de mutation doit être exécutée de manière synchrone

La fonction de mutation doit être une fonction synchrone, c'est-à-dire qu'elle ne peut pas contenir d'opérations asynchrones (telles que setTimeout). En effet, Vuex doit garantir que plusieurs fonctions de mutation sont exécutées séquentiellement dans l'ordre d'enregistrement, ce qui est requis par le mécanisme réactif de Vuex. Si la fonction de mutation est asynchrone, cet ordre ne peut pas être garanti et l'état ne peut pas être mis à jour correctement.

Exemple de code :

// mutation函数
const mutations = {
  // 增加count值
  addCount(state, num) {
    setTimeout(() => {
      state.count += num; // 错误代码：包含异步操作
    }, 1000);
  }
}

// 调用方法
this.$store.commit('addCount', 5);

Si une telle erreur se produit, nous pouvons utiliser la fonction d'action pour soumettre la mutation de l'opération asynchrone. Exemple de code :

// mutation函数
const mutations = {
  // 增加count值
  addCount(state, num) {
    state.count += num;
  }
}

// action函数，提交mutation
const actions = {
  asyncAddCount(context, num) {
    setTimeout(() => {
      context.commit('addCount', num); // 提交mutation
    }, 1000);
  }
}

// 调用方法，通过action间接调用mutation
this.$store.dispatch('asyncAddCount', 5);

De cette façon, vous pouvez vous assurer que la fonction de mutation est toujours exécutée de manière synchrone.

Résumé

Lors de l'utilisation de vuex dans une application Vue, "Erreur : [vuex] ne mute pas l'état du magasin vuex en dehors des gestionnaires de mutation." Ce message d'erreur signifie que nous avons directement modifié l'état vuex dans l'application sans utiliser la mutation. fonction. Pour modifier, cela viole les règles de Vuex.

Afin d'éviter cette erreur, nous devons faire attention aux deux points suivants lors de l'écriture du code :

1. La valeur de l'état ne peut être modifiée que dans la fonction de mutation
2. La fonction de mutation doit être exécutée de manière synchrone

Si vous devez toujours utiliser des opérations asynchrones, vous pouvez utiliser la fonction d'action pour soumettre des mutations à partir d'opérations asynchrones. En suivant ces règles, vous pouvez éviter cette erreur et utiliser avec succès Vuex pour la gestion de l'état.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!