Wechat applet realizes store function

Start

Last issue 《 Wechat applet implements data listener watch》, In the small program to achieve Vue Of watch function . But applets don't have state management , In the current situation , Cross page communication and data transmission are very painful , It will be difficult to maintain and debug . Let's do it this time store, Global state management function , To solve the problem of egg pain , There are several goals ：

• stay Page and Component Can be used in all lifecycles and functions in store, Can be modified state
• A few lines of code will introduce , Do not modify the previous code structure , You don't need to introduce... On every page
• Usage and vue equally

programme

store It's actually a global variable , All pages share , Realization store Functions include 2 A key point

1. Page and Component How to reference global variables in state, How to render data to a page
2. Changed global variables state, How to put other Page and Component Global variables referenced state Also update and render to the page

The first question is , stay Page Of onLoad Functions and Component Of attached In the function , stay options Add a pair of global variables in state References to , And call this.setData Method will change the variable state The data is rendered to the page

The second question is , Need to maintain a list , The currently loaded Page and Component All stored , That is to say Page Of onLoad Functions and Component Of attached Function to add the current object to the list , stay Page Of onUnload Functions and Component Of detached Function to remove the current object from the list . Then when there is a call setState When the method is used , Traverse all the objects in this list , call this.setData Method will change the variable state The data is rendered to the page .

Let's look at the implementation code , Write a store.js, The contents are as follows ：

//  Global variables 
let store = {
  msg: 'xxxxx',
  user: {}
}
//  All loaded pages and components 
let pcList = []
function initPage() {
  let oldPage = Page
  Page = function(obj) {
    let oldOnLoad = obj.onLoad || function() {}
    let oldOnUnload = obj.onUnload || function() {}
    obj.onLoad = function() {
      //  Realization store function ,onLoad Will be state Add to Page Of data in 
      loadStore.call(this)
      //  Realization store Of setState function 
      this.setState = function(obj) {
        setState.call(this, obj)
      }
      oldOnLoad.call(this, ...arguments)
    }
    obj.onUnload = function() {
      //  hold this Spread function
      unloadStore.call(this)
      oldOnUnload.call(this, ...arguments)
    }
    return oldPage(obj)
  }
}
function initComponent() {
  let oldComponent = Component
  Component = function(obj) {
    let oldAttached = obj.attached || function() {}
    let oldDetached = obj.detached || function() {}
    obj.attached = function() {
      //  Realization store function ,onLoad Will be state Add to Component Of data in 
      loadStore.call(this)
      //  Realization store Of setState function 
      this.setState = function(obj) {
        setState.call(this, obj)
      }
      oldAttached.call(this, ...arguments)
    }
    obj.detached = function() {
      //  hold this Spread function
      unloadStore.call(this)
      oldDetached.call(this, ...arguments)
    }
    return oldComponent(obj)
  }
}
function setState(obj) {
  let keys = Object.keys(obj)
  let newObj = {}
  keys.forEach(key => {
    newObj['$state.' + key] = obj[key]
  })
  //  Update all components and pages 
  pcList.forEach(item => {
    item.setData(newObj)
  })
}
function loadStore() {
  //  Join in pcList, stay setState Traversing when you need to 
  pcList.push(this)
  //  Every page or component is in data Store one copy in state References to 
  this.$state = store
  this.setData({
    $state: store
  })
}
function unloadStore() {
  //  from pcList Remove 
  let index = pcList.findIndex(item => {
    return item === this
  })
  if (index > -1) {
    pcList.splice(index, 1)
  }
}
initPage()
initComponent()

Use

The first is introduction , stay app.js introduce store.js that will do

import './utils/store.js'

Then use the method , stay wxml Use in

 <view>{
   {$state.msg}}</view>

stay js In order to get state And update state

Page({
  //...
  func(){
    //  obtain state Medium user
    let storeUser = this.$state.user
    storeUser.name = 'Becky'
    //  to update state Medium user
    this.setState({
      user:storeUser
    })
  }
})

Conclusion

We did store function , And achieved the three goals written at the beginning , Can be used in all lifecycles and functions , One line of code can introduce , Usage and Vue equally .

But only the most basic store function , But it can meet the needs of the current project , If there are other needs in the future , On this basis, add .