preface

When we develop small programs, we will inevitably encounter the need to apply global state. However, most third-party libraries are directly encapsulated pages and components, so the code is a bit invasive, and many original pages need to be changed when used. So their development of a simple state management function to use, use the effect is good. Low invasions, no need to modify the original code, just add state as needed.

State management library source code

// Global status sharing
class Store{
  constructor(options){
    this.state=options.state;// Global status
    this.dep={};// State dependent
  }
  // Add dependencies
  addDep(page,state){
    for(let key in state){
      this.state[key]=state[key]
      if(!this.dep[key]){
        this.dep[key]={
          pages: [].pageIds: {}// Do not add it repeatedly}}let pageId=page.__route__;
      if(!this.dep[key].pageIds[pageId]){
        this.dep[key].pageIds[page.__route__]=1;
        this.dep[key].pages.push(page)
      }
    }
    // console.log(option)
    page.setData(state);
  }
  // Remove the uninstalled page
  removeDep(page,state){
    for(let key in state){
      if(this.dep[key]){
        this.dep[key].pages=this.dep[key].pages.filter(item= >{
          if(item.__route__==page.__route__){
            this.dep[key].pageIds[page.__route__]=null;
          }
          returnitem.__route__! =page.__route__; })}}}// Update the status
  setStore(state){
     for(let key in state){
      this.state[key]=state[key];
      // console.log(key,this.state[key])
      this.dep[key].pages.forEach(page= >{
        page.setData(state)
        // console.log(page)})}}}// Initialize the global state
export function initStore(app,store){
  app.$store=new Store(store);
}
//page or Component call
export function useStore(page,state){
  let store=getApp().$store;
  if(! state){// If you do not define the state you want to use, all states will be applied
    state=store.state;
  }
  if(! page.$store){// Each interface is initialized only once. Subsequent calls do not take effect
    page.$store=store;
    // console.log(page)
    // Remove the current page from the page when uninstalling the page
    page.onUnload=function(){
        store.removeDep(page,state)
    }
    store.addDep(page,state)
  }
}
// Provide methods to update the global state on interfaces that do not apply global state
export function setStore(state){
  let store=getApp().$store;
  store.setStore(state);
}
Copy the code

use

Global state initialization. This step first requires us to initialize the state management library in the current app.js. That is, call initStore.

import {initStore} from './utils/Store'
App({
  onLanuch(){
    initStore(this, {state: {message:'Global state'}})}})Copy the code

Use the useStore() or setStore() apis to modify and retrieve global state where it is needed. We can use useStore directly in onLoad. UseStore does two things:

  • Add the current page or component to a state dependency
  • Adds a global state management object for the current page or componentstoreA reference to the$storeWe use.

We can then use this.$soter syntax directly to call our supplied setStore to update the state.

import {useStore} from './utils/Store'
Page({
  updateState(){
    // The page that calls useStore to apply global state can be updated directly with this.$store without introducing setStore
    this.$store.setStore({message:'New State 111'})}onLoad(){
    // If useStore does not pass the second argument, all global state will be applied to the current page or component. If useStore passes the second argument, only the current page will be applied
    // Add the specified state to the component
    useStore(this, {message:'New state'})}})Copy the code

Note that useStore will apply all global state to the current page or component if it does not pass the second parameter, and will only add the specified state to the current page or component if it passes the second parameter.

In addition, if we don’t need to add the current page or component to the state dependency and just need to update the state, we can simply introduce the setStore function to the page and use it to update the state.

import {setStore} from './utils/Store'
Page({
  updateState(){
    // Use setStore directly to update the status
    setStore({message:'New State 111'})}})Copy the code

The last

Above is a simple global status management library of their own micro channel small program, gives all the source code and use methods, I feel good to use, if you are helpful also hope not streamline praise and attention, I will continue to update some technical articles. If insufficient, also hope not stingy correct.