How to monitor global variables in WeChat applet

I recently encountered a problem at work. There is a global variable red_heart. Because it is used in many places, when it changes, the places where it is used must also be changed. However, native applets do not have related practices like Vue. So I want to implement a global variable change myself, and re-render wherever this variable is used.

Get started

First of all, there must be red_heart in the global variable

globalData: {
    red_heart:0,
  },

Then add a Proxy proxy to the global variable in the onLaunch method.

Proxy is easy to understand, and everyone who understands it will understand it.

this.globalData = new Proxy(this.globalData, {
      get(target, key){
        return target[key];
      },
      set:(target, key, value)=>{
        if(key === "red_heart"){
          this.globalDep.RedHeartDep.notify()
        }
        return Reflect.set(target, key, value);
      }
    });

Mainly look at the set method, there is a this.globalDep.RedHeartDep.notify(), what is this. This is a Dep I created globally, short for dependency collection.

Code

globalDep:{
    RedHeartDep:
      subs:[],
      addSub(watch){
        this.subs.push(watch)
      },
      removeWatch(id){
        this.subs = this.subs.filter((item)=>{
          return item.id != id
        })
      },
      notify(){
        setTimeout(()=>{
          this.subs.forEach(w=>w.update())
        },0)
      }
    }
  }

subs is an array used to collect dependencies, addSub and removeWatch, and notification is used to tell this thing to be updated.

Now there is another question, that is, where to add this dependency? Of course, it should be added where it is used, that is, when the component is created.

Attach the full component js code:

const app = getApp()
Component({
  properties:

  },
  data: {
    red_heart:0
  },
  lifetimes:
    attached(){
      let watch = {
        id:this.__wxExparserNodeId__,
        update:()=>{
          this.setData({
            red_heart:app.globalData.red_heart
          })
        }
      }
      app.globalDep.RedHeartDep.addSub(watch)
      app.globalData.red_heart = app.globalData.red_heart
    },
    detached(){
      app.globalDep.RedHeartDep.removeWatch(this.__wxExparserNodeId__)
    }
  },
  methods: {
    handClick(){
      app.globalData.red_heart++
      console.log(app.globalData)
    }
  }
})

Add dependencies to attached, and don't forget to delete the dependencies when the component is destroyed. This id is a compilation id of the mini program and is used directly.
That's it, it's done!

Summarize

This is the end of this article about how WeChat mini programs monitor global variables. For more relevant mini program monitoring global content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!