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

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

安装 MobX

  • 在小程序根目录下执行 npm install --save mobx-miniprogram mobx-miniprogram-bindings 安装 mobx-miniprogrammobx-miniprogram-bindings
  • 点击开发者工具中的菜单栏:工具 --> 构建 npm 完成构建。

创建 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 有三种形式:

  • 数组形式:指定 data 中哪些字段来源于 store 。例如 ['numA', 'numB']
  • 映射形式:指定 data 中哪些字段来源于 store 以及它们在 store 中对应的名字。例如 { a: 'numA', b: 'numB' } ,此时 this.data.a === store.numAthis.data.b === store.numB
  • 函数形式:指定 data 中每个字段的计算方法。例如 { a: () => store.numA, b: () => anotherStore.numB } ,此时 this.data.a === store.numAthis.data.b === anotherStore.numB

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

actions 有两种形式:

  • 数组形式:例如 ['update'] ,此时 this.update === store.update
  • 映射形式:例如 { buttonTap: 'update' } ,此时 this.buttonTap === store.update

为了提升性能,在 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
 })
 },
})
作者:花铛原文地址:https://blog.csdn.net/wsln_123456/article/details/128050313

%s 个评论

要回复文章请先登录注册