npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

// 創(chuàng)建store文件夾下的store.js文件，在這個(gè) JS 文件中，專門來(lái)創(chuàng)建 Store 的實(shí)例對(duì)象
import {observable,action} from 'mobx-miniprogram'
 
export const store = observable({
  // 數(shù)據(jù)字段
  numA:1,
  numB:2,
  // 計(jì)算屬性
  get sum(){
    return this.numA + this.numB
  },
  // actions 函數(shù)，專門來(lái)修改 store 中數(shù)據(jù)的值
  updateNum1:action(function(step){
    this.numA += step
  }),
  updateNum2:action(function(step){
    this.numB += step
  }),
})

// 路徑需要相對(duì)路徑，不然會(huì)報(bào)錯(cuò)
import {createStoreBindings} from '../../miniprogram/miniprogram_npm/mobx-miniprogram-bindings/index'
import {store} from '../../store/store'
Page({
  //生命周期函數(shù)--監(jiān)聽頁(yè)面加載
  onLoad(options) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updateNum1']
    })
  },
  //生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
  onUnload() {
    this.storeBindings.detroyStoreBindings()
  },
})

// .wxml文件
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="primary" bindtap="btnHander1" data-step="{{1}}">numA+1</van-button>
<van-button type="danger" bindtap="btnHander1" data-step="{{-1}}">numB-1</van-button>
// .js文件
// pages/message/message.js
import {createStoreBindings} from '../../miniprogram/miniprogram_npm/mobx-miniprogram-bindings/index'
import {store} from '../../store/store'
 
Page({
  //生命周期函數(shù)--監(jiān)聽頁(yè)面加載
  onLoad(options) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updateNum1']
    })
  },
  //綁定按鈕點(diǎn)擊事件
  btnHander1(e){
    // console.log(e);
    this.updateNum1(e.target.dataset.step)
  },
  //生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
  onUnload() {
    this.storeBindings.detroyStoreBindings()
  },
})

import {storeBindingsBehavior} from '../../miniprogram/miniprogram_npm/mobx-miniprogram-bindings/index'
import {store} from '../../store/store'
 
Page({
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    // 數(shù)據(jù)源
    store, //指定要綁定的store
    fields:{//指定要綁定的字段數(shù)據(jù)
      numA:()=>store.numA,     //綁定字段的第一種方式
      numB:(store)=>store.numB,//綁定字段的第二種方式
      sum:'sum',               //綁定字段的第三種方式
    },
    actions:{ //指定要綁定的方法
      updateNum2:'updateNum2'
    }
  },
})

//組件的 .wxml結(jié)構(gòu)
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="primary" bindtap="btnHander2" data-step="{{1}}">numB+1</van-button>
<van-button type="danger" bindtap="btnHander2" data-step="{{-1}}">numB-1</van-button>
 
//組件的 .js結(jié)構(gòu)
methods: {
  btnHander2(e){
    this.updateNum2(e.target.dataset.step)
  }
}

{
  "pages":[ //主包的所有界面
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "subpackages":[ //通過(guò)subpackages節(jié)點(diǎn)，聲明分包的結(jié)構(gòu)
    {
      "root": "package", //第一個(gè)分包的根目錄
      "name": "p1"http://給分包起個(gè)別名用來(lái)區(qū)分分包
      "pages": [//當(dāng)前分包下，所有頁(yè)面的相對(duì)存放路徑
        "pages/demoA/demoA",
        "pages/demoB/demoB"
      ]
    },
    {
      "root": "package2", //第二個(gè)分包的根目錄
      "name": "p2"http://給分包起個(gè)別名用來(lái)區(qū)分分包
      "pages": [//當(dāng)前分包下，所有頁(yè)面的相對(duì)存放路徑
        "pages/demoC/demoC",
        "pages/demoD/demoD"
      ]
    }
  ],
}

"subpackages":[ 
  {
    "root": "package", 
    "pages": [
      "pages/demoA/demoA",
      "pages/demoB/demoB"
    ],
    "independent": true //通過(guò)此節(jié)點(diǎn)，聲明當(dāng)前“package”分包為“獨(dú)立分包”
  }
],

{
  "preloadRule":{ //分包預(yù)下載規(guī)則
      "pages/contact/contact":{ //觸發(fā)分包預(yù)下載的頁(yè)面路徑
        //network 表示在指定的網(wǎng)絡(luò)模式下進(jìn)行預(yù)下載
        //可選值為：all（不限網(wǎng)絡(luò)）或wifi（僅 wifi 模式下進(jìn)行預(yù)下載）
        //默認(rèn)值為：wifi
        "network": "all"
        //packages 表示進(jìn)入頁(yè)面之后，預(yù)下載哪些分包
        //可以通過(guò) root 或 name 指定預(yù)下載哪些分包
        "packages": ["package"],
       }
  }
}