小程序之全局数据共享 MobX

安装MobX包复制命令 npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

创建store实例代码

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 () {
    const sum = this.sum;
    this.numA = this.numB;
    this.numB = sum;
  }),
});

下图就是小程序里创建的store实例。步骤创建一个store文件夹，里面创建一个store.js文件，把store实例创建在该文件里

将store绑定到页面中的代码

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

Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ["numA", "numB", "sum"],
      actions: ["update"],
    });
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
});

将store绑定到组件中的代码

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

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: "sum",
    },
    actions: {
      buttonTap: "update",
    },
  },
});