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

构建可扩展的状态系统：基于 ArkTS 的模块化状态管理设计与实现

news 2025/7/28 10:35:41

在这里插入图片描述

摘要

在 HarmonyOS 的日常开发中，很多人都会遇到一个问题：多个页面之间的数据状态如何共享？尤其是在组件结构越来越复杂的场景下，如果还用传统方式来传值，不仅代码混乱，维护也很吃力。

为了解决这个问题，本文将介绍一种用 ArkTS 实现的“模块化状态管理”方式。它的思路有点类似于 React 中的 Redux，通过创建一个单独的状态模块，把所有共享状态集中管理，再在各个页面中引用它，从而实现状态同步更新。

引言

随着应用体量越来越大，一个页面一个状态的写法已经越来越难以满足业务需求了。例如：首页有一个计数器，设置页也需要读取和修改这个值；再比如，有些全局配置比如暗黑模式、用户登录信息等，全 app 都要用。

这种时候，模块化状态管理就非常有用了。它的好处是：

状态集中管理
页面之间不需要一层层传参
状态变化可控、可追踪
更易测试与维护

而 ArkTS 原生就支持单例和模块导入的机制，所以在 HarmonyOS 中实现模块化状态管理其实并不复杂。

用 ArkTS 实现模块化状态管理

创建一个状态模块（StateManager）

我们先来看一个最简单的状态管理模块，只包含一个全局的计数器：

// StateManager.ts
export class StateManager {private static instance: StateManager;public count: number = 0;private constructor() {}static getInstance() {if (!StateManager.instance) {StateManager.instance = new StateManager();}return StateManager.instance;}
}

这个模块用了经典的“单例模式”，也就是只创建一个实例，在整个 app 中共享。任何页面只要调用 StateManager.getInstance()，就能拿到这个共享状态。

在页面中引用这个状态模块

下面我们写一个页面，展示这个 count 值，并且点击按钮让它 +1。

// MainPage.ets
import { StateManager } from './StateManager';@Entry
@Component
struct MainPage {private stateManager = StateManager.getInstance();build() {Column() {Text(`Count: ${this.stateManager.count}`).fontSize(20);Button('Increment').onClick(() => {this.stateManager.count++;});}.padding(20);}
}

现在我们打开这个页面，点击按钮，每点一次，count 就加一。

模块化状态在实际场景中的使用案例

案例 1：多页面共享的购物车数量

假设我们在商城 app 里有多个页面（比如首页、购物车页、商品详情页），都需要显示购物车里的商品数量。

状态模块

// CartState.ts
export class CartState {private static instance: CartState;public itemCount: number = 0;private constructor() {}static getInstance() {if (!CartState.instance) {CartState.instance = new CartState();}return CartState.instance;}addItem() {this.itemCount++;}clearCart() {this.itemCount = 0;}
}

首页展示购物车数量

// HomePage.ets
import { CartState } from './CartState';@Component
struct HomePage {private cartState = CartState.getInstance();build() {Row() {Text(`购物车商品数量: ${this.cartState.itemCount}`)Button('添加商品').onClick(() => {this.cartState.addItem();});}.padding(20);}
}

购物车页面清空功能

// CartPage.ets
import { CartState } from './CartState';@Component
struct CartPage {private cartState = CartState.getInstance();build() {Column() {Text(`当前数量: ${this.cartState.itemCount}`)Button('清空购物车').onClick(() => {this.cartState.clearCart();});}}
}

这样，两个页面共享同一个 CartState 实例，更新状态时，页面数据也会同步。

案例 2：全局用户信息管理

比如你有个用户模块，登录成功后需要把用户信息存下来，后续其他页面都能用。

// UserState.ts
export class UserState {private static instance: UserState;public username: string = '';public isLoggedIn: boolean = false;private constructor() {}static getInstance() {if (!UserState.instance) {UserState.instance = new UserState();}return UserState.instance;}login(name: string) {this.username = name;this.isLoggedIn = true;}logout() {this.username = '';this.isLoggedIn = false;}
}