Lösung für das Problem des wiederholten Auslösens von Funktionen in der Vue-Projektüberwachung

Problembeschreibung:

Es gibt zwei Seiten A und B, jede Seite hat eine getList() Methode. Beide Methoden müssen denselben Parameter C übergeben und der Vorgang der Auswahl des Parameters C ist ziemlich kompliziert. Um das Problem der wiederholten Auswahl von Parameter C beim Wechseln zwischen den Schnittstellen A und B zu vermeiden, speichere ich Parameter C in vuex und höre dann mit watch auf beiden Seiten auf Parameter C, um getList() auszuführen. Dann habe ich ein Problem festgestellt. Wenn ich nach dem Aufrufen von Seite A auf Seite B den Parameter C auf Seite B erneut auswähle, wird auch die Methode getList() von Seite A ausgeführt. Umgekehrt wird auch die Methode getList() von Seite B ausgeführt, wenn ich nach dem Aufrufen von Seite B auf Seite A den Parameter C auf Seite A ändere.

Später fand ich heraus, dass es an der Verwendung von Keep-Alive lag. Keep-Alive hält die Vue-Instanz immer im Speicher, sodass die Vue-Instanz immer existiert und die entsprechenden Watcher immer wirksam sind. Nachdem ich nach relevanten Informationen gesucht hatte, stellte ich fest, dass viele Leute auf dieses Problem gestoßen waren. Schließlich fand ich die folgenden zwei Lösungen:

Lösung 1

Bestimmen Sie, ob getList() über den Routerpfad ausgeführt werden soll

betrachten:
        irgendeinWert(neuerWert, alterWert) {
            if (this.$route.fullPath === 'Ein Seitenroutingpfad') {
                // etwas tun
            }
        }
    }

Lösung 2

Fügen Sie einen Flag-Parameter hinzu, um zu bestimmen, ob sich die Seite im aktiven Status befindet. Komponenten, die Keep-Alive-Caching verwenden, lösen nur activated und deactivated Ereignisse aus. Setzen Sie das Flag daher auf „true“ und „false“, wenn diese beiden Ereignisse ausgelöst werden. Nur wenn das Flag „true“ ist, wird getList() ausgeführt.

{
  Daten () {
    zurückkehren {
      aktiviertFlag: false
    };
  },
  betrachten:
    'irgendeinWert'(Wert) {
      wenn(val && this.activatedFlag) {
        dies.getlist();
      }
    }
  },
  aktiviert () {
    this.activatedFlag = wahr;
  },
  deaktiviert () {
    this.activatedFlag = falsch;
  }
}

Wenn viele Seiten vorhanden sind und die Funktionsnamen auf den einzelnen Seiten inkonsistent sind, können Sie den Überwachungsteil des obigen Codes entfernen, in ein Mixin schreiben und es dann auf der erforderlichen Seite importieren.

  importiere activeFlag aus "@/mixin/activeFlag";

  Standard exportieren {
    Mixins: [aktive Flagge],
    betrachten:
        'irgendeinWert'(Wert) {
          wenn(val && this.activatedFlag) {
            dies.getlistA();
            dies.getlistB();
          }
        }
      },
  }

Oben sind die Details der beiden Lösungen für das Problem des wiederholten Auslösens von Funktionen in der Vue-Projektüberwachung aufgeführt. Weitere Informationen zur Lösung des wiederholten Auslösens von Vue-Überwachungsfunktionen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!