So überwachen Sie globale Variablen im WeChat-Applet

Ich bin kürzlich bei der Arbeit auf ein Problem gestoßen. Es gibt eine globale Variable „red_heart“. Da sie an vielen Stellen verwendet wird, müssen bei einer Änderung auch die Stellen geändert werden, an denen sie verwendet wird. Native Applets verfügen jedoch nicht über entsprechende Praktiken wie Vue. Daher möchte ich selbst eine globale Variablenänderung implementieren und überall dort neu rendern, wo diese Variable verwendet wird.

Erste Schritte

Zunächst muss die globale Variable red_heart enthalten

globalData: {
    rotes Herz:0,
  },

Fügen Sie dann der globalen Variable in der onLaunch-Methode einen Proxy-Proxy hinzu.

Proxy ist leicht zu verstehen, und jeder, der es versteht, wird es verstehen.

this.globalData = neuer Proxy(this.globalData, {
      get(Ziel, Schlüssel){
        Ziel [Schlüssel] zurückgeben;
      },
      set:(Ziel, Schlüssel, Wert)=>{
        wenn(Schlüssel === "rotes_Herz"){
          dies.globalDep.RedHeartDep.notify()
        }
        returniere Reflect.set(Ziel, Schlüssel, Wert);
      }
    });

Schauen Sie sich hauptsächlich die Set-Methode an, es gibt ein this.globalDep.RedHeartDep.notify(), was ist das. Dies ist ein von mir global erstelltes Dep, die Abkürzung für Abhängigkeitssammlung.

Code

globalDep:{
    RedHeartDep:
      Untertitel:[],
      addSub(beobachten){
        this.subs.push(beobachten)
      },
      entferneWatch(id){
        dies.subs = dies.subs.filter((item)=>{
          gibt item.id zurück != id
        })
      },
      benachrichtigen(){
        setzeTimeout(()=>{
          dies.subs.fürJeden(w=>w.update())
        },0)
      }
    }
  }

„subs“ ist ein Array, das zum Sammeln von Abhängigkeiten, zum Hinzufügen und Entfernen von Watch verwendet wird, und „ notification“ wird verwendet, um diesem Ding mitzuteilen, dass es aktualisiert werden soll.

Nun stellt sich noch die Frage, wo diese Abhängigkeit hinzugefügt werden soll. Natürlich sollte sie dort hinzugefügt werden, wo sie verwendet wird, also bei der Erstellung der Komponente.

Hängen Sie den vollständigen JS-Code der Komponente an:

const app = getApp()
Komponente({
  Eigenschaften:

  },
  Daten: {
    rotes_Herz:0
  },
  Lebensdauern:
    beigefügt(){
      lass zusehen = {
        id:diese.__wxExparserNodeId__,
        aktualisieren:()=>{
          dies.setData({
            rotes_Herz:app.globalData.rotes_Herz
          })
        }
      }
      app.globalDep.RedHeartDep.addSub(Uhr)
      app.globalData.red_heart = app.globalData.red_heart
    },
    losgelöst(){
      app.globalDep.RedHeartDep.removeWatch(this.__wxExparserNodeId__)
    }
  },
  Methoden: {
    handClick(){
      app.globalData.red_heart++
      Konsole.log(App.globalData)
    }
  }
})

Fügen Sie Abhängigkeiten zum Anhängen hinzu und vergessen Sie nicht, die Abhängigkeiten zu löschen, wenn die Komponente zerstört wird. Diese ID ist eine Kompilierungs-ID des Miniprogramms und wird direkt verwendet.
Das war's, es ist geschafft!

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie WeChat-Miniprogramme globale Variablen überwachen. Weitere relevante Inhalte zur globalen Überwachung von Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!