小程序全局状态还能这么简单？只需初始化一次，页面自动同步

小皮虾2026-10-16 12:12

最近在小程序项目里，经常会遇到一些需要跨页面共享的数据，例如用户信息、购物车数量、订单筛选条件等。

这些数据通常不大，引入一套完整状态管理方案又有些重，所以我写了一个轻量的小程序状态管理工具 miniprogram-state。

它的使用思路很简单：在 app.js 中初始化一次，之后页面可以直接通过 miniState 使用共享数据。修改状态后，页面会自动同步，无需在每个页面重复注册或手动刷新。

一、初始化共享数据

在 app.js 中引入并初始化：

php 复制代码

import { initState } from "miniprogram-state";

initState({
  userInfo: {
    name: "小明",
    avatar: "",
  },
  cart: {
    count: 0,
    list: [],
  },
});

App({});

这里的数据主要适合用户信息、购物车、页面筛选条件等小体量共享状态。

二、页面直接使用

页面不需要额外配置，WXML 可以直接读取：

sql 复制代码

<view>用户名：{{miniState.userInfo.name}}</view>
<view>购物车：{{miniState.cart.count}}</view>

需要修改状态时，在页面 JS 中引入默认导出的状态对象：

javascript 复制代码

import miniState from "miniprogram-state";

Page({
  changeName() {
    miniState.userInfo.name = "小红";
  },

  addCart() {
    miniState.cart.count++;
  },
});

对象属性修改以及数组的 push、splice 等操作，都可以触发页面数据同步：

php 复制代码

miniState.cart.list.push({
  id: 1,
  name: "示例商品",
});

三、组件中使用

页面向组件传入 miniState：

ini 复制代码

<goods-card miniState="{{miniState}}" />

组件声明对应属性后即可读取：

css 复制代码

Component({
  properties: {
    miniState: Object,
  },
});

组件 WXML：

sql 复制代码

<view>{{miniState.userInfo.name}}</view>

这个方案主要追求简单直接，不包含持久化、异步请求、登录流程等额外能力，只负责小程序内的轻量状态共享。

目前已经发布到 npm，包名是 miniprogram-state，欢迎有类似需求的开发者试用，也欢迎交流更合适的小程序状态管理思路。