以下是一个简单的示例，演示如何在微信小程序中使用 MobX 和 MobX 绑定辅助库：
1. 安装 MobX 和 MobX 绑定辅助库。
npm install mobx mobx-wxapp --save
2. 在小程序的 app.js 中配置 MobX。
const mobx = require('mobx');
const mobxWxapp = require('mobx-wxapp');
App({
onLaunch: function () {
// 启用 MobX 绑定辅助库
mobxWxapp(mobx);
},
});
3. 在页面的 js 文件中使用 MobX。
const { observable, action, autorun } = require('mobx');
const app = getApp();
// 创建 MobX store
const store = observable({
count: 0,
increment: action(function () {
this.count += 1;
}),
decrement: action(function () {
this.count -= 1;
}),
});
// 创建 autorun 函数，它会在 store 发生变化时自动运行
autorun(() => {
console.log(`Count: ${store.count}`);
});
Page({
data: {
count: store.count,
},
onLoad: function () {
// 使用 autorun 函数更新页面数据
autorun(() => {
this.setData({
count: store.count,
});
});
},
onIncrement: function () {
// 调用 MobX action 更新状态
store.increment();
},
onDecrement: function () {
// 调用 MobX action 更新状态
store.decrement();
},
});
在这个示例中，我们通过 observable 创建了一个 MobX store，并在页面中使用它的状态和方法。MobX 的 action 用于定义修改状态的函数，而 autorun 可以用来监听状态的变化，当状态发生变化时会自动运行。
请注意，MobX 绑定辅助库 mobx-wxapp 提供了对小程序框架的支持，使得 MobX 在小程序中能够更好地集成。在实际项目中，你可以根据需要进一步扩展和定制 MobX 的使用。
转载请注明出处：http://www.zyzy.cn/article/detail/1356/微信小程序