一、为什么微信小程序需要全局状态管理

做微信小程序开发的时候，你大概率会遇到这样的场景：首页要显示购物车的商品数量，分类页也要同步这个数量，商品详情页点击“加购”后，三个页面都得实时更新这个数字。如果不用全局状态管理，你可能会在每个页面都写一遍请求接口拉购物车数据，或者把数据存在app.js的globalData里，跳页面时同步，但这样很容易出现数据不同步的问题——比如某个页面修改了购物车数量，另一个页面没及时拿到更新后的值，用户看到的数量不一致，体验特别差。尤其是稍微复杂的小程序，比如电商、社区类，这种跨页面共享数据的需求会特别多，全局状态管理就是帮你解决这个问题的，让多个页面/组件共享同一份数据，修改一处，所有用到的地方自动更新。

二、常见的全局状态管理方案及优缺点

2.1 原生globalData的使用与痛点

很多开发者一开始都会用微信小程序自带的globalData，就是在app.js里定义一个全局对象存数据，比如：

// app.js里的globalData
App({
  globalData: {
    cartCount: 0,
    userInfo: null
  }
})

然后在页面里通过getApp().globalData来获取或修改数据，不用额外安装依赖，上手特别快。但它的缺点也很明显：首先没有响应式，你修改cartCount的时候，页面不会自动知道，必须手动调用setData更新；其次深层嵌套的数据修改麻烦，比如要改购物车里某件商品的数量，你得写很长的路径，很容易写错；还有调试困难，数据改了哪些地方不容易追踪，适合特别小的项目。

2.2 第三方成熟状态管理库的优劣

如果项目复杂一点，很多人会用第三方库，比如mobx-miniprogram、redux-miniprogram这些。它们的优点是成熟稳定，有完整的生态，支持响应式，能追踪所有状态变化，还有专门的调试工具；但缺点也很突出：需要额外学习库的语法和使用方法，增加了学习成本，而且项目体积会变大，对于中小项目来说有点冗余，没必要用这么重的方案。

三、轻量自定义全局状态管理实现（手写方案）

既然原生的不够好用，第三方的太重，那中小项目自己手写一个轻量的全局状态管理就很合适，既能解决痛点，又灵活，还不用额外引入依赖。

3.1 核心设计思路

手写的核心是三个部分：单例模式（保证整个小程序只有一个全局状态实例，不会出现多个不同的状态）、状态存储（用一个对象存所有全局数据）、订阅机制（让页面/组件监听状态变化，变化后自动通知，不需要手动拉取）。

3.2 完整代码示例

技术栈明确是JavaScript（微信小程序原生环境），代码如下：

// 技术栈：JavaScript（微信小程序原生环境）
// 轻量全局状态管理核心实现
class GlobalStore {
  constructor() {
    // 1. 存储全局状态，所有共享数据都存在这里
    this.state = {
      // 示例：购物车数量、用户信息，可按需扩展
      cartCount: 0,
      userInfo: null
    };
    // 2. 存储所有订阅状态变化的回调，用Set避免重复添加
    this.subscribers = new Set();
  }

  // 3. 更新状态的方法，外部必须调用这个方法改状态，不能直接修改this.state
  setState(newState) {
    // 合并新状态，保留旧的未修改数据，避免覆盖
    this.state = { ...this.state, ...newState };
    // 遍历所有订阅者，执行回调，通知状态变化
    this.subscribers.forEach(callback => callback(this.state));
  }

  // 4. 订阅状态变化，传入回调函数，返回取消订阅的方法
  subscribe(callback) {
    // 添加回调到订阅集合
    this.subscribers.add(callback);
    // 初始化时，先给订阅者传递当前最新的状态，避免首次渲染为空
    callback(this.state);
    // 返回取消订阅的函数，页面卸载时调用，避免内存泄漏
    return () => this.subscribers.delete(callback);
  }
}

// 导出单例，保证整个小程序只有一个GlobalStore实例，全局唯一
const store = new GlobalStore();
module.exports = store;

这个代码特别简洁，没有多余的逻辑，适合中小项目用。

3.3 页面使用示例

比如首页要显示购物车数量，还需要加购，页面代码如下：

// 首页index.js，使用自定义的全局状态管理
const store = require('../../utils/store'); // 引入刚才的store文件

Page({
  data: {
    // 页面本地数据，和全局状态联动，这里存购物车数量
    cartCount: 0
  },

  // 页面加载时，订阅全局状态的变化
  onLoad() {
    // 订阅store的变化，只要状态更新，就把最新的cartCount更新到页面数据
    this.unsubscribe = store.subscribe((state) => {
      this.setData({ cartCount: state.cartCount });
    });
  },

  // 页面卸载时，必须取消订阅，避免内存泄漏
  onUnload() {
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  },

  // 点击加购按钮，调用setState更新全局状态
  handleAddToCart() {
    // 从页面本地数据获取当前数量，加1后更新全局状态
    const newCount = this.data.cartCount + 1;
    store.setState({ cartCount: newCount });
  }
});

这样，当首页点击加购，store的cartCount更新，所有订阅了这个状态的页面（比如分类页、商品详情页）都会自动收到通知，更新自己的页面数据，不用每个页面都改代码，特别方便。

四、全局状态管理的优化策略

光实现基础功能还不够，要让状态管理性能更好，还要做优化，主要有几个方向：

4.1 模块化拆分状态

如果全局状态特别多，比如用户模块、购物车模块、订单模块，不要把所有数据都塞到一个state里，应该拆分出不同的状态模块，比如单独写userStore、cartStore，每个模块管理自己的状态和更新逻辑。这样修改某个模块的状态时，只会通知订阅该模块的页面，不会浪费资源通知所有订阅者，减少不必要的页面更新，提升性能。

4.2 缩小订阅范围

刚才的示例里，页面订阅的是整个store的状态，但其实可以只订阅自己需要的状态，比如购物车组件只订阅cartCount，不用订阅userInfo。怎么实现？可以给subscribe方法加参数，让它只订阅指定的状态key，这样只有当对应key变化时才执行回调，减少setData的调用次数，小程序里setData是性能瓶颈，减少调用能大幅提升页面流畅度。

4.3 及时清理订阅（避免内存泄漏）

这一点特别重要，很多新手开发容易忽略：页面卸载后，订阅的回调还存在store的subscribers里，会导致内存泄漏，甚至页面里的变量还被引用，无法被垃圾回收，小程序性能会越来越差。所以必须在页面的onUnload生命周期里调用之前返回的unsubscribe方法，示例里已经写了，一定要记得加。

4.4 状态持久化优化

有些状态不需要每次都从接口拉，比如用户信息、购物车列表，可以存在小程序的本地缓存里，用wx.setStorageSync和wx.getStorageSync实现。在store初始化的时候，先从缓存里读取状态，如果有就直接设到this.state里，这样用户下次打开小程序时，不用等待接口返回，页面加载更快，体验更好。比如修改store的constructor，加个初始化读取缓存的逻辑：

constructor() {
  this.state = {
    cartCount: 0,
    userInfo: null
  };
  // 从缓存里读取状态，初始化时赋值
  const cachedCartCount = wx.getStorageSync('cartCount');
  if (cachedCartCount) {
    this.state.cartCount = cachedCartCount;
  }
  this.subscribers = new Set();
}

然后在setState的时候，同步把状态存到缓存里，这样下次打开就能直接用。

五、应用场景与注意事项

5.1 适合的应用场景

这种全局状态管理特别适合需要跨页面共享数据的场景：比如电商类的购物车数量、用户登录状态、商品收藏列表；社区类的帖子列表、用户个人信息；工具类的城市选择、主题配置等。只要是多个页面都需要用到的相同数据，都可以用全局状态管理，避免重复代码和数据不同步。

5.2 关键注意事项

有几个点一定要注意：第一，绝对不能直接修改store的this.state，必须用setState方法，因为setState会触发订阅者的回调，直接改this.state不会通知，页面不会更新；第二，状态里不要存函数或者复杂的引用类型（比如DOM元素），小程序的状态是要序列化的，非序列化的数据会出问题；第三，不要把临时变量存在全局状态里，比如某个页面的临时输入内容，存在本地就好，全局状态只放共享的数据，避免混乱；第四，订阅的回调里不要写太复杂的逻辑，比如大量的计算，会影响页面响应速度，尽量简化。

六、总结

微信小程序的全局状态管理，没有统一的最优方案，要根据项目大小来选：中小项目用手写的轻量方案，灵活高效，没有冗余；大型复杂项目用成熟的第三方库，功能更完善，适合多人协作。不管选哪种方案，都要注意优化策略：拆分状态模块、缩小订阅范围、清理订阅避免内存泄漏、做好状态持久化，这样既能解决多页面数据同步的核心痛点，又能提升小程序的性能和用户体验，减少后续维护的麻烦。