当前位置：首页 > news >正文

小程序中的状态管理库-mobx-miniprogram

news 来源：原创 2025/6/12 20:24:42

mobx-miniprogram 是一个基于 MobX 的状态管理库，适用于微信小程序，能够实现页面和组件间的响应式数据通信。以下是其使用方法：

安装依赖

在项目根目录下运行以下命令，安装 mobx-miniprogram 和 mobx-miniprogram-bindings：

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

创建 MobX Store

在项目中创建一个单独的文件（如 store.js），用于定义状态管理的 Store：

// store.js
import { observable, action } from 'mobx-miniprogram';export const store = observable({numA: 1,numB: 2,get sum() {return this.numA + this.numB;},update: action(function () {const sum = this.sum;this.numA = this.numB;this.numB = sum;}),
});

在组件中使用 Store

在组件中，通过 mobx-miniprogram-bindings 将 Store 绑定到组件：

// 组件文件
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings';
import { store } from './store';Component({behaviors: [storeBindingsBehavior],storeBindings: {store,fields: ['numA', 'numB', 'sum'],actions: ['update'],},methods: {onTap() {this.update(); // 调用 store 中的 action},},
});

在页面中使用 Store

对于页面，可以通过创建一个 Behavior 来绑定 Store：

// behavior.js
import { BehaviorWithStore } from 'mobx-miniprogram-bindings';
import { store } from '../store';export const myBehavior = BehaviorWithStore({storeBindings: {store,fields: ['numA', 'numB', 'sum'],actions: ['update'],},
});

然后在页面中使用这个 Behavior：

// 页面文件
import { myBehavior } from './behavior';Page({behaviors: [myBehavior],onLoad() {console.log(this.data.numA); // 访问绑定的数据},onTap() {this.update(); // 调用绑定的 action},
});