1. 文档

• https://juejin.cn/post/7241101553712955451
• https://www.bookstack.cn/read/miniprogram-guide-20210305/54620b3fcfec59b9.md

2. 安装

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

3. 新建 mobx.js

import { observable, action } from 'mobx-miniprogram'
export const store = observable({
  // 数据字段
  percent: 0,
  percent2: 0,

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

  // actions 方法
  setPercent: action(function (num = 0) {
    this.percent = num
  })
})

4. 页面中使用

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/index'
Page({
  data: {},
  onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: {
        numA: 'numA',
        num2: 'num2',
        sum: 'sum'
      },
      actions: ['update', 'setPercent']
    })
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings()
  },
  changeVal() {
    this.setPercent(66)
  }
})

5. 组件中使用

const app = getApp()
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '@/utils/mobx'
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      percent: 'percent'
    },
    actions: ['setPercent']
  }
})

6. store 目录下划分以下多个模块：

userStore.js cartStore.js orderStore.js

createStoreBindings(this, { store: xxx })
storeBindings: {
  store: xxx
}