微信小程序：全局状态管理mobx-miniprogram

安装

npm install --save mobx-miniprogram mobx-miniprogram-bindings

定义 store.js

/**
 * 全局状态管理
 */
import { observable, action } from 'mobx-miniprogram';

export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,

  // 计算属性
  get sum() {
    return this.numA * this.numB;
  },

  // actions
  update: action(function () {
    this.numA++;
  }),
});

在 Component 构造器中使用

import{ storeBindingsBehavior }from'mobx-miniprogram-bindings'
import{ store }from'./store'


Component({
  // behavior 绑定
  behaviors:[storeBindingsBehavior],

  data:{
    someData:'...'
  },

  storeBindings:{
    store,
    fields:{
      numA:()=> store.numA,
      numB:(store)=> store.numB,
      sum:'sum'
    },
    actions:{
      buttonTap:'update'
    },
  },

  methods:{
    myMethod(){
       this.data.sum // 来自于 MobX store 的字段
   }
 }
})

在 Page 构造器中使用：

import{ createStoreBindings }from'mobx-miniprogram-bindings'
import{ store }from'./store'

Page({
  data:{
    someData:'...'
  },

  onLoad(){
    // 手工绑定 
    this.storeBindings = createStoreBindings(this,{
          store,
          fields:['numA','numB','sum'],
          actions:['update'],
    })
  },

  // 一定要调用清理函数，否则将导致内存泄漏！
  onUnload(){
    this.storeBindings.destroyStoreBindings()
  },

  myMethod(){
    this.data.sum // 来自于 MobX store 的字段
  }
})

在 app.js 中使用

import { store } from './store';

App({
    onShow(options) {
        // 更新
        store.update();
  },
})

参考
​​https://www.bookstack.cn/read/miniprogram-extended/54620b3fcfec59b9.md​​