微信小程序全局数据共享(MobX)

1. 安装 mobx-miniprogram 和 mobx-miniprogram-bindings

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

2. 创建 MobX Store

import { observable, action } from 'mobx-miniprogram'

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

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

  // action
  updateNumA: action(function(step) {
    this.numA += step
  }),
  
  updateNumB: action(function(step) {
    this.numB += step
  })

})

3. 在 Component 构造器中使用

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

Component({
  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 的字段
    },
  },
});

4. 在在 Page 构造器中使用

import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "./store/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 的字段
  },
});

npm 地址

https://www.npmjs.com/package/mobx-miniprogram-bindings/v/2.1.3