企业官网建设流程全解析

承接上篇《Marquee+@Link打造电商商品列表页》，本文解决一个所有电商App都必须面对的核心痛点：用户关闭App后，购物车数据怎么保留？​ 前几篇我们讲的@State/@Link都是组件级内存状态，App进程被杀后数据直接清零。本文将深入API23的应用级状态管理能力，用AppStorage+PersistentStorage实现数据全局共享+本地持久化，所有结论均经过真机验证，附赶稿专用浏览器模拟方案。

一、前言：从"组件状态"到"应用状态"的必然跨越

上篇写完电商列表页后，我特意测试了一个场景：往购物车加了3件商品，总价19997，然后划掉App后台进程，再重新打开——结果购物车全空了，一切回到解放前。

这就是组件级状态的局限性：@State存储在组件实例里，组件销毁/进程被杀，数据直接回收。而真实的电商App必须做到：

1. 所有页面都能访问购物车数据（全局共享）

2. 关闭App后数据不丢失（本地持久化）

3. 多设备登录能同步数据（后续分布式篇展开）

HarmonyOS 6.1的Stage模型提供了两层应用级状态管理方案：

• AppStorage：应用级内存存储，单例，全局可访问，进程杀死后数据丢失

• PersistentStorage：本地磁盘存储，把AppStorage里的指定字段同步到本地，App重启后自动恢复

本文就以上篇的电商列表为基础，把购物车数据从组件级迁移到应用级，实现"关App不丢数据"的效果。

二、核心概念辨析（官方没讲透的三个区别）

很多新手会把AppStorage/PersistentStorage/@State搞混，我们先把边界理清楚：

💡核心认知：PersistentStorage不是独立的存储，它是AppStorage的"持久化插件"——只能同步AppStorage里已有的字段，不能直接存数据。这是90%新手踩的第一个坑。

三、代码实现（API23 生产级实战）

我们基于上篇的电商列表页改造，把购物车数量、暂停状态从@State迁移到AppStorage，并通过PersistentStorage持久化。

3.1 第一步：初始化PersistentStorage（关键！）

必须在UIAbility的onCreate里初始化，不能在页面里初始化，否则App重启后会读取不到数据。

打开entry/src/main/ets/entryability/EntryAbility.ts：

import { UIAbility, AbilityConstant, Want } from '@kit.AbilityKit' import { window } from '@kit.ArkUI' import { PersistentStorage } from '@kit.ArkUI' export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { // 【关键】初始化PersistentStorage，绑定AppStorage里的两个字段 PersistentStorage.persistProp('cartCounts', [0, 0, 0]) // 购物车数量数组，默认全0 PersistentStorage.persistProp('pausedId', -1) // 暂停的商品ID，默认-1（全滚动） this.context.getApplicationContext().setColorMode(0) } onWindowStageCreate(windowStage: window.WindowStage): void { windowStage.loadContent('pages/Index', (err) => { if (err.code) return }) } // 其他方法省略... }

注意：persistProp(key, defaultValue)的两个参数：

• key：必须与后续AppStorage里的key完全一致

• defaultValue：第一次启动App（本地无数据时）的默认值，必须是可序列化的基础类型（number/string/boolean/array），不能存对象！

3.2 第二步：封装全局状态工具类（工程化必备）

为了避免在组件里到处写AppStorage的冗长代码，我们封装一个工具类：

新建entry/src/main/ets/common/GlobalState.ets：

import { AppStorage } from '@kit.ArkUI' /** * 全局状态管理工具类 * 封装AppStorage的操作，统一状态访问入口，降低维护成本 */ export class GlobalState { // 购物车数量数组的key private static readonly KEY_CART_COUNTS = 'cartCounts' // 暂停商品ID的key private static readonly KEY_PAUSED_ID = 'pausedId' /** * 获取购物车数量数组 * @returns 数量数组 */ static getCartCounts(): number[] { return AppStorage.get<number[]>(this.KEY_CART_COUNTS) || [0, 0, 0] } /** * 更新购物车数量 * @param index 商品索引 * @param count 新数量 */ static updateCartCount(index: number, count: number): void { const counts = this.getCartCounts() counts[index] = Math.max(0, count) // 防止负数 AppStorage.setOrUpdate(this.KEY_CART_COUNTS, counts) } /** * 获取暂停的商品ID * @returns 暂停ID，-1表示全滚动 */ static getPausedId(): number { return AppStorage.get<number>(this.KEY_PAUSED_ID) || -1 } /** * 更新暂停的商品ID * @param id 新暂停ID */ static updatePausedId(id: number): void { AppStorage.setOrUpdate(this.KEY_PAUSED_ID, id) } /** * 计算购物车总价 * @param goodsList 商品列表 * @returns 总价 */ static calcTotalPrice(goodsList: { price: number }[]): number { const counts = this.getCartCounts() let total = 0 for (let i = 0; i < goodsList.length; i++) { total += goodsList[i].price * counts[i] } return total } }

3.3 第三步：改造商品列表页（使用应用级状态）

修改Index.ets，删除原有的@State变量，改用@StorageLink绑定AppStorage：

import { GoodsItem } from './GoodsItem' import { GlobalState } from '../common/GlobalState' import { GoodsBean } from './GoodsItem' @Entry @Component struct Index { // 【关键】绑定AppStorage里的字段，全局共享+自动同步 @StorageLink('cartCounts') counts: number[] = [0, 0, 0] @StorageLink('pausedId') pausedId: number = -1 // 商品列表数据（仍用@State，因为不需要持久化，重启App重新加载即可） @State goodsList: GoodsBean[] = [ { id: 1, title: '【API23新特性】HarmonyOS 6.1 定制款超长商品标题...', price: 5999 }, { id: 2, title: '华为Mate 60 Pro 先锋计划 全网通智能手机...', price: 6999 }, { id: 3, title: '鸿蒙智联认证 智能穿戴手表 长续航蓝牙通话...', price: 1299 } ] // 总价通过计算属性实时获取，无需状态管理 get totalPrice(): number { return GlobalState.calcTotalPrice(this.goodsList) } build() { Column() { Text('电商商品列表页 (应用级状态管理实战)') .fontSize(22) .fontWeight(FontWeight.Bold) .margin({ top: 20, bottom: 20 }) // 列表渲染 List() { ForEach(this.goodsList, (item: GoodsBean, index: number) => { ListItem() { GoodsItem({ goods: item, pausedId: $this.pausedId, count: $this.counts[index] // 绑定AppStorage里的数组元素 }) } }, (item: GoodsBean) => item.id.toString()) } .width('100%') .layoutWeight(1) // 底部结算栏 Row() { Text(`总价：¥${this.totalPrice}`) .fontSize(20) .fontColor('#FF0000') .fontWeight(FontWeight.Bold) Blank() Button('去结算') .backgroundColor('#0A59F7') .fontColor(Color.White) } .width('100%') .padding(20) .backgroundColor('#f8f9fa') } .width('100%') .height('100%') .backgroundColor('#f0f0f0') } }

改动点说明：

1. 用@StorageLink('cartCounts')替代@State counts，数据从组件私有变为全局共享

2. 删除了counts的初始化逻辑，因为PersistentStorage已经在EntryAbility里设置了默认值

3. 总价计算委托给GlobalState工具类，符合单一职责原则

3.4 第四步：子组件无需大改（验证状态共享）

GoodsItem.ets几乎不用改，因为之前已经用了@Link绑定，现在@Link绑定的是AppStorage里的字段，自然实现了全局同步：

// GoodsItem.ets 核心部分不变 @Component export struct GoodsItem { @Prop goods: GoodsBean @Link pausedId: number @Link count: number // 现在绑定的是AppStorage里的全局count // ... 其余代码和上篇完全一致 }

四、原理剖析：为什么这样写性能最优？

1. 最小持久化开销：PersistentStorage只同步了cartCounts和pausedId两个必要字段，没有把整个商品列表（可能很大）存到本地，避免了磁盘IO性能损耗。

2. 全局单例无拷贝：AppStorage是单例，所有组件访问的是同一份数据，@StorageLink只是建立了引用关系，没有深拷贝，内存开销极低。

3. 精准刷新：只有绑定了cartCounts的组件才会响应数据变化，未绑定的组件（如不需要购物车数据的页面）不会触发重建，符合ArkUI的最小刷新原则。

五、踩坑记录（官方文档没写的5个细节）

这些坑我花了3个小时才踩明白，新手可以直接跳过：

5.1 PersistentStorage必须在UIAbility初始化

❌ 错误：在页面的aboutToAppear里调用PersistentStorage.persistProp

✅ 正确：在EntryAbility.ts的onCreate里调用

原因：PersistentStorage需要在应用启动时最早初始化，页面生命周期太晚，会导致第一次读取不到数据。

5.2 不能存复杂对象/大数组

❌ 错误：PersistentStorage.persistProp('goodsList', [...])（存整个商品列表）

✅ 正确：只存必要的标识/数量，商品列表从网络/本地数据库加载

原因：PersistentStorage基于序列化存储，大对象会导致：

• App启动慢（反序列化耗时）

• 内存占用高

• 超过阈值会直接抛异常

5.3 key必须完全一致

PersistentStorage.persistProp('cartCounts', [])和AppStorage.get('cartCounts')的key必须一字不差，大小写敏感。我之前把cartCounts写成cart_count，找了半小时bug。

5.4 @StorageLink vs @StorageProp

• @StorageLink：双向绑定，修改后全局同步（适合购物车数量）

• @StorageProp：单向绑定，只能读不能改（适合用户主题偏好）

  踩坑：把购物车数量用@StorageProp绑定，结果子组件改了数量，父组件没反应。

5.5 调试技巧：打印AppStorage所有内容

赶稿时不知道AppStorage里有什么，可以在任意组件里加这段代码：

aboutToAppear(): void { console.log('AppStorage所有key:', AppStorage.keys()) console.log('购物车数量:', AppStorage.get('cartCounts')) }

用hdc shell hilog就能看到输出，不用等Preview刷新。

六、总结与延伸

本文实现了从组件级状态到应用级状态的跨越，核心收获有三个：

1. AppStorage是全局内存状态的"中央仓库"，所有组件通过@StorageLink共享数据

2. PersistentStorage是AppStorage的持久化插件，只同步必要字段，避免性能损耗

3. 初始化必须在UIAbility的onCreate中完成，否则会导致数据丢失

至此，我们已经覆盖了HarmonyOS 6.1开发的环境搭建→组件基础→状态管理→业务实战→应用级存储全流程。下一篇，我们将挑战Stage模型的核心——UIAbility的生命周期与页面路由，讲解多页面跳转、参数传递、页面栈管理等高频面试点，让我们的电商App真正具备多页面交互能力。