安装

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();
  },})