小程序中可以使用mobx-miniprogram配合mobx-miniprogram-bindings进行状态管理（全局数据管理）。

安装依赖

npm i -S mobx-miniprogram mobx-miniprogram-bindings

创建全局对象

// store.js
import { observable,action } from 'mobx-miniprogram'
export const store = observable({
  num1: 1,
  num2: 2,
  get sum(){
    return this.num1 + this.num2
  },
  updateNum1: action(function(step){  // 注意，此处是用action包住一个函数，函数的第一个参数是触发action时传的参数
    this.num1 += step
  })
})

组件中的使用

// components/player/player.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../utils/store'
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      num1: 'num1',
      num2: 'num2',
      sum: 'sum'
    },
    actions: {
      updateNum1: 'updateNum1'
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    sum() {
      this.updateNum1(1)
      console.log('点击事件被触发！！');
    },
  }
})

页面中使用

// home页面的 home.js

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

Page({
  onLoad: function (options) {
    this.storeBindings = createStoreBindings(this,{
      store,                          // 传入store
      fields: ['num1','num2','sum'],  // 需要什么数据都在此处声明
      actions: ['updateNum1']          // action在此声明，使用actions时 this.updateNum1即可触发action
    })
  },
  sum() {
    this.updateNum1(1)
    console.log('点击事件被触发！！');
  },
  back() {
    wx.navigateBack()
  },
  onUnload: function () {
    this.storeBindings.destroyStoreBindings()  // 页面卸载时销毁数据绑定
    console.log('页面卸载时销毁数据绑定');
  }
})

完整代码 github.com/Lil-TT/wx_m…