WeChatアプレットでグローバル変数を監視する方法

最近、仕事で問題に遭遇しました。グローバル変数 red_heart があります。これは多くの場所で使用されているため、変更があった場合は、使用されている場所も変更する必要があります。ただし、ネイティブアプレットには Vue のような関連するプラクティスはありません。そこで、グローバル変数の変更を自分で実装し、この変数が使用されている場所で再レンダリングしたいと思います。

始める

まず、グローバル変数にred_heartがなければなりません

グローバルデータ: {
    赤いハート:0,
  },

次に、onLaunch メソッドのグローバル変数に Proxy プロキシを追加します。

プロキシは理解しやすく、理解できる人なら誰でも理解できます。

this.globalData = 新しいプロキシ(this.globalData, {
      get(ターゲット、キー){
        ターゲット[キー]を返します。
      },
      set:(ターゲット、キー、値)=>{
        if(キー === "red_heart"){
          this.globalDep.RedHeartDep.notify()
        }
        Reflect.set(ターゲット、キー、値) を返します。
      }
    });

主にsetメソッドを見ると、this.globalDep.RedHeartDep.notify()がありますが、これは何でしょうか。これは私がグローバルに作成した Dep (依存関係コレクションの略) です。

コード

グローバルDep:{
    レッドハートDep:
      サブ:[],
      addSub(ウォッチ){
        this.subs.push(ウォッチ)
      },
      ウォッチIDを削除する
        this.subs = this.subs.filter((item)=>{
          item.id != id を返します
        })
      },
      通知(){
        タイムアウトを設定します(()=>{
          this.subs.forEach(w=>w.update())
        },0)
      }
    }
  }

subs は依存関係、addSub、removeWatch を収集するために使用される配列であり、notification はこれを更新するように通知するために使用されます。

ここで別の疑問が浮かびます。この依存関係をどこに追加するかということです。もちろん、依存関係は使用される場所、つまりコンポーネントが作成されるときに追加する必要があります。

完全なコンポーネント js コードを添付します。

const アプリ = getApp()
成分（{
  プロパティ:

  },
  データ： {
    赤いハート:0
  },
  生涯:
    添付（）{
      ウォッチ = {
        id:this.__wxExperserNodeId__、
        更新:()=>{
          this.setData({
            red_heart:app.globalData.red_heart
          })
        }
      }
      app.globalDep.RedHeartDep.addSub(ウォッチ)
      app.globalData.red_heart = app.globalData.red_heart
    },
    分離された(){
      app.globalDep.RedHeartDep.removeWatch(this.__wxExpparserNodeId__) を参照してください。
    }
  },
  メソッド: {
    ハンドクリック(){
      app.globalData.red_heart++
      コンソールログ(app.globalData)
    }
  }
})

依存関係をアタッチに追加し、コンポーネントが破棄されたときに依存関係を削除することを忘れないでください。この ID はミニプログラムのコンパイル ID であり、直接使用されます。
これで完了です！

要約する

WeChatミニプログラムがグローバル変数を監視する方法についてはこれで終わりです。ミニプログラム監視のグローバルコンテンツの詳細については、123WORDPRESS.COMで以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません: