Quelle est la solution de contournement pour les changements de valeur qui ne sont pas observés dans Vuex ?

Ci-dessous, je vais partager avec vous une solution basée sur l'incapacité d'observer les changements de valeur dans Vuex. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Lors de la traversée de la vue principale de l'itinéraire, étant donné que la valeur d'état de Vuex est toujours stockée dans la mémoire, lorsque la vue du composant est rechargée, le composant peut ne pas être en mesure de détecter le changement de la valeur d'état, ce qui entraîne des problèmes. logique d'apparaître une erreur.

Supposons que le composant d'en-tête général a une valeur d'état de tâche globale et que les autres composants doivent être mis à jour en fonction de cette valeur de tâche. La situation la plus probable est que la valeur d'état de tâche est chargée de manière asynchrone, elle doit donc l'être. écrit comme ceci Logique métier :

computed : {
 task () {
  return this.$store.state.task
 } 
},
watch : {
 task : {
   deep: true,
   handler (val) {
    // 由于是异步载入，所以只能在状态值的变化时执行渲染操作
    // 绝不可在mounted中执行render方法
    this.render(val)
   }
 } 
}

Cependant, pour les raisons ci-dessus, lorsque la vue est chargée pour la première fois, parce que la valeur de l'état Vuex n'a pas été stockée dans la mémoire, le rendu est normal . Après le changement de vue, bien que la valeur d'état de la tâche soit rechargée, puisque la tâche n'a pas changé, la méthode de rendu ne sera pas appelée, le composant ne peut donc pas terminer le processus de rendu.

La solution est très simple. Pour forcer le changement de la valeur de la tâche, la méthode consiste à définir un horodatage. Si vous estimez que la granularité de l'horodatage est encore trop grossière, vous pouvez également utiliser une combinaison aléatoire. nombres, comme suit :

watch: {
 taskId : {
   handler (val) {
    // 从v-model获取到的新值
    let taskId = this.taskId
    // 提交新值变化
    this.$store.commit(TASK_ID, 
    {
     id : taskId,
     // 添加时间戳
     time : Date.now().valueOf(),
     // 添加随机数
     random : Math.random()
    })
   }
 }
}

Après le traitement ci-dessus, tant que l'attribution de taskId se produit, cela déclenchera définitivement le changement d'état de Vuex, donc à chaque fois que le composant est chargé ou la valeur de taskId changements, la méthode de rendu sera définitivement exécutée.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

La différence entre document.write et document.writeln en js

La relation entre prototype et __proto__ en Javascript Explication détaillée

Boucles Node.JS pour supprimer tous les fichiers dans les dossiers et sous-répertoires non vides

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!