Was ist die Problemumgehung für Wertänderungen, die in Vuex nicht beobachtet werden?

Im Folgenden werde ich Ihnen eine Lösung vorstellen, die auf der Unfähigkeit basiert, Wertänderungen in Vuex zu beobachten. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Da beim Überqueren der Hauptroutenansicht der Statuswert von Vuex immer im Speicher gespeichert wird und die Komponentenansicht neu geladen wird, kann die Komponente die Änderung des Statuswerts möglicherweise nicht erkennen, was zu Problemen führt Logik erscheint.

Angenommen, die allgemeine Header-Komponente hat einen globalen Aufgabenstatuswert und andere Komponenten müssen basierend auf diesem Aufgabenwert aktualisiert werden. Die wahrscheinlichere Situation ist, dass der Aufgabenstatuswert asynchron geladen wird, also muss er sein geschrieben wie folgt Geschäftslogik:

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

Wenn die Ansicht jedoch zum ersten Mal geladen wird, ist das Rendering aus den oben genannten Gründen normal, da der Vuex-Statuswert nicht im Speicher gespeichert wurde. Nachdem der Ansichtswechsel erfolgt ist, wird die Rendermethode nicht aufgerufen, obwohl der Aufgabenstatuswert neu geladen wird, da sich die Aufgabe nicht geändert hat, sodass die Komponente den Rendervorgang nicht abschließen kann.

Um eine Änderung des Aufgabenwerts zu erzwingen, besteht die Methode darin, einen Zeitstempel zu definieren. Wenn Sie der Meinung sind, dass die Granularität des Zeitstempels noch zu grob ist, können Sie auch eine Kombination aus Zufall verwenden Zahlen wie folgt:

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

Nach der obigen Verarbeitung wird die Statusänderung von Vuex ausgelöst, solange die Zuweisung von taskId erfolgt, sodass jedes Mal, wenn die Komponente geladen wird oder sich der Wert von taskId ändert, die Die Render-Methode wird ausgeführt.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Der Unterschied zwischen document.write und document.writeln in js

Die Beziehung zwischen Prototyp und __proto__ in Javascript Ausführliche Erklärung

Node.JS-Schleifen zum Löschen aller Dateien in nicht leeren Ordnern und Unterverzeichnissen

Das obige ist der detaillierte Inhalt vonWas ist die Problemumgehung für Wertänderungen, die in Vuex nicht beobachtet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!