解锁小程序全局状态管理：MobX 状态共享实战指南

时间醉酒

已于 2025-09-02 21:45:15 修改

阅读量676

点赞数 29

CC 4.0 BY-SA版权

分类专栏：微信小程序开发文章标签：小程序

于 2025-09-01 22:00:54 首次发布

本文链接：https://blog.csdn.net/2502_90793638/article/details/151084090

微信小程序开发专栏收录该内容

3 篇文章

订阅专栏

在小程序开发中，当不同页面或组件间需要共享数据，或者当一个组件的状态需要影响其他组件时，我们就面临着全局状态管理的需求。Vuex、Redux、MobX 等都是常用的状态管理方案。本文将聚焦于 MobX，结合 mobx-miniprogram 和 mobx-miniprogram-bindings，深入讲解如何在微信小程序中实现高效、可追踪的全局数据共享。全局数据共享（状态管理）

MobX 状态共享的基石：`mobx-miniprogram` 与 `mobx-miniprogram-bindings`

mobx-miniprogram: 这是 mobx 库在微信小程序环境下的适配版本，它提供了创建和管理 MobX Store 的核心能力。
mobx-miniprogram-bindings: 这个库则解决了如何将 Store 中的共享数据或方法绑定到小程序组件或页面的关键问题，实现了 Store 与组件/页面的无缝关联。

简而言之就是用store储存需要共享的数据，然后在需要里面数据的时候可以将数据共享出去

具体方案：

Mobx-miniprogram:用来创建Store实例对象

Mobx-miniprogram-bindings:用来吧Store中的共享数据活方法绑定到组件或页面中使用，将Store中的数据和组件或页面关联起来

操作步骤：

步骤一：

安装Mobx相关的包（我已经安装过了，显示更新成功）

（1）在项目终端运行命令：

（2）删除miniprogram_npm这个包（若是微信版本较新可省略这一步）

省略第（2）步可能出现的问题：

[基础库] 正在使用灰度中的基础库 3.8.6 进行调试。如有问题，请前往工具栏-详情-本地设置更改基础库版本。
VM1760:11 页面【miniprogram_npm/@vant/weapp/button/index]错误:
Error: module 'miniprogram_npm/@vant/weapp/mixins/open-type.js' is not defined, require args is '../mixins/open-type'

解决方案：

点击“详情”→“详情”→“本地设置”→取消勾选“将JS编译成ES5”→重新勾选“将JS编译成ES5”→重新编译即可

（3）点击“工具”→“构建npm”如下

步骤二：

创建MobX的Srore实例

（1）在项目根目录创建一个文件store（可以是其他名称）：用来储存与Mobx相关的js文件

（2）在store文件中创建store.js文件：用来创建store的实例对象

在store.js文件中：

（3）导入包’mobx-miniprogram’，通过observable方法创建共享Store实例对象如下：

（4）将创建好的实例对象导出去，这样外界需要的时候可以导入Store

如何修改store里面的数据？

如果我们想要修改store里面的数据可以直接修改吗？答案是：

不可以

为什么不可以直接修改store里面的数据？

核心原因：破坏 MobX 的响应式机制，导致一系列“安全问题”（指应用的不稳健性、难管理性和低性能）。

失去可追踪性： Actions 记录状态变化，直接修改让调试和追踪变得不可能。
失去可管理性： 状态修改混乱，不可预测，容易引发竞态条件和逻辑错误。
影响性能： 无法实现 MobX 的智能批量更新，导致不必要的频繁渲染。
破坏响应式： UI 不更新，计算属性失效，MobX 的核心优势丧失。

总之，Actions 是 MobX 承诺的追踪、管理和性能优化的“合同”，跳过 Actions 就是主动放弃这些保障，让应用变得混乱和不稳定。

在 MobX 中，Action 是唯一被允许修改 Store 中可观察（observable）数据（State）的方法。这是 MobX 的核心原则之一，称为 "Actions are the only way to change the state"。这样做的好处是：

可追踪性：所有状态的改变都通过 Actions 进行，便于调试和追踪。

可管理性：确保状态的修改是可控的，避免了直接随意修改可能带来的混乱。

性能优化： MobX 可以知道什么时候一个批量修改的事务开始和结束，从而更有效地进行更新。

所以当你想要修改store里面的数据的时候，可以定义一个action方法让外界引用去修改store里的数据

正确修改store里数据的步骤：

步骤一：

导入action方法

在store.js文件中，从包’mobx-miniprogram’里面导入action方法

步骤二：

定义action方法

解析：

我们定义了一个名为 updateNum1 的 MobX Action。当你调用 store.updateNum1时：

MobX 会拦截这个调用，并在一个名为 updateNum1 的事务中执行。
在事务内部，this.numA 的值会增加 step。
MobX 会追踪这个对 this.numA 的修改。
一旦 updateNum1 函数执行完毕，MobX 就会通知所有监听 this.numA 变化的地方（例如 UI 组件），让它们根据新的 numA 值进行更新。

这就是 MobX 中 Action 的核心用法：包装状态修改的逻辑，确保状态变更的可追踪性和响应性。

总结

通过 mobx-miniprogram 和 mobx-miniprogram-bindings，我们可以轻松地在微信小程序中构建一套清晰、响应式且易于维护的状态管理系统。掌握 MobX 的核心概念——State (状态)、Actions (动作) 和 Reactions (响应)——能够极大地提升小程序开发的效率和代码质量。下期我们将讲述如何在页面以及组件使用store中的成员。