亲宝软件园·资讯

展开

微信小程序MoxB实现全局状态管理流程详解

花铛 人气:0

github 地址:https://github.com/wechat-miniprogram/mobx-miniprogram-bindings

安装 MobX

创建 MobX Store

在小程序根目录下新建 store.js文件,创建 MobX Store。

// store.js
import { observable, action } from "mobx-miniprogram";
export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,
  // 计算属性
  get sum() {
    return this.numA + this.numB;
  },
  // actions
  updateNumA: action(function () {
    this.numA = 3;
  }),
});

使用 MobX Store

将页面、自定义组件和 store 绑定有两种方式: behavior 绑定和手工绑定 。

behavior 绑定:使用 storeBindingsBehavior 这个 behavior 和 storeBindings 定义段。

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
     // 绑定配置
  },
  // 也可以把 storeBindings 设置为一个数组,可以同时绑定多个 store
  storeBindings: [
    {
      // 绑定配置 1
    },
    {
      // 绑定配置 2
    },
  ],
})

手工绑定: 使用 createStoreBindings 创建绑定,它会返回一个包含清理函数的对象用于取消绑定。

在页面 onUnload 或自定义组件 detached 时一定要调用清理函数,否则将导致内存泄漏。

import { createStoreBindings } from "mobx-miniprogram-bindings";Page({ onLoad() { this.storeBindings = createStoreBindings(this, { // 绑定配置 }); }, onUnload() { this.storeBindings.destroyStoreBindings(); },});import { createStoreBindings } from "mobx-miniprogram-bindings";
Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      // 绑定配置
    });
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
});

无论使用哪种绑定方式,都必须提供一个绑定配置对象。这个对象包含以下字段:

store:一个 MobX observable。用于指定默认的 MobX store。

fields:数组或对象。用于指定需要绑定的 data 字段。

fields 有三种形式:

actions:数组或对象。用于指定需要映射的 actions,将 store 中的一些 actions 放入页面或自定义组件的 this 下。

actions 有两种形式:

为了提升性能,在 store 中的字段被更新后,并不会立刻同步更新到 this.data 上,而是等到下个 wx.nextTick 调用时才更新,这样可以显著减少 setData 的调用次数。

如果需要立刻更新,可以在 behavior 绑定中调用 this.updateStoreBindings(),或者在手工绑定中调用 this.storeBindings.updateStoreBindings()

如果只是更新对象中的一部分,是不会引发界面变化的。

例如:this.someObject.someField = "xxx"; 是不会触发界面更新的,可以改成this.someObject = Object.assign({}, this.someObject, { someField: "xxx" });

在 Component 构造器中使用

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "../../store/store";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      numA: "numA",
      numB: "numB",
      sum: "sum",
    },
    actions: {
      updateNumA: "updateNumA",
    },
  },
  methods: {
    myMethod() {
      this.updateNumA()
      wx.nextTick(() => {
        const A = this.data.numA; // 3
        const B = this.data.numB; // 2
        const C = this.data.sum; // 5
      })
    },
  },
});

在 Page 页面中使用

小程序基础库版本 2.9.2 以上,可以直接像 Component 构造器那样引入 behaviors 。

import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "../../store/store";
Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ["numA", "numB", "sum"],
      actions: ["updateNumA"],
    });
    wx.nextTick(() => {
      const A = this.data.numA; // 1
      const B = this.data.numB; // 2
      const C = this.data.sum; // 3
    })
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
  myMethod() {
    this.updateNumA()
    wx.nextTick(() => {
      const A = this.data.numA; // 3
      const B = this.data.numB; // 2
      const C = this.data.sum; // 5
    })
  },
})

加载全部内容

相关教程
猜你喜欢
用户评论