HarmonyOS 鸿蒙Next中使用 AppStorage 实现跨页面全局状态共享

HarmonyOS 鸿蒙Next中使用 AppStorage 实现跨页面全局状态共享 在很多场景下，比如在登录页登录后，首页、个人中心等所有页面自动显示用户名，又比如商品详情页加入购物车后，底部导航栏的购物车图标数字实时更新，这些都涉及到跨页面的全局状态共享，那如何来实现呢？

3 回复

实现思路

我们采用AppStorage来进行全局的内容存储，AppStorage 是内置的全局响应式状态容器。

一、全局注册：通过 AppStorage.SetOrCreate(key, value) 在任意位置初始化一个全局状态；

二、跨页面绑定：在任意组件中使用 @StorageLink(key) 或 @StorageProp(key) 绑定该状态；

三、@StorageLink：双向绑定（可读写），适合需要修改的场景；

四、@StorageProp：单向绑定（只读），适合仅展示的场景；

五、自动响应：任一组件修改状态，所有绑定该 key 的组件自动刷新 UI；

通过AppStorage我们就可以完美的实现全局状态共享 。

本次采用登录共享来分享一下，核心创建2个页面，首页和登录页面来实现流程。

完成实现代码

HomePage

import { router } from '@kit.ArkUI';

@Entry
@Component
struct HomePage {
  //  单向绑定全局用户名
  [@StorageProp](/user/StorageProp)('username')
  private username: string = '';

  build() {
    Column({ space: 30 }) {
      Text(this.username ? `欢迎回来，${this.username}！` : '请先登录')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('去登录')
        .width(200)
        .height(45)
        .onClick(() => {
          router.pushUrl({ url: 'pages/LoginPage' });
        })
    }
    .width('100%')
    .padding(30)
    .justifyContent(FlexAlign.Center)
  }
}

LoginPage

import { router } from '@kit.ArkUI';

@Entry
@Component
struct LoginPage {
  // 双向绑定全局用户名
  [@StorageLink](/user/StorageLink)('username')
  private username: string = '';

  build() {
    Column({ space: 25 }) {
      Text('登录')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      TextInput({ placeholder: '请输入用户名' })
        .onChange((value: string) => {
          this.username = value; // 自动同步到全局
        })
        .width('100%')
        .height(50)

      Button('登录')
        .enabled(this.username.trim() !== '')
        .width('100%')
        .height(45)
        .backgroundColor(this.username.trim() !== '' ? '#007DFF' : '#ccc')
        .onClick(() => {
          // 登录成功，返回首页
          router.back();
        })
    }
    .padding(30)
    .width('100%')
  }
}

实现效果

首页初步效果，我们点击去登录

cke_68961.png

登录页面，我们输入用户名 点击登录，会返回到首页

cke_71444.png

登录完成效果

cke_79062.png

更多关于HarmonyOS 鸿蒙Next中使用 AppStorage 实现跨页面全局状态共享的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，AppStorage是应用全局的存储对象，用于实现跨页面状态共享。它基于ArkTS的响应式能力，允许开发者在应用的任何页面或组件中访问和修改同一份数据。使用时，通过@StorageLink或@StorageProp装饰器将组件变量与AppStorage中的属性绑定，数据变更会自动同步到所有绑定该属性的组件。AppStorage支持多种数据类型，包括基本类型、对象和数组。

在HarmonyOS Next中，使用AppStorage实现跨页面全局状态共享是推荐的方案。AppStorage是应用级别的全局状态管理容器，允许在应用的任何页面或组件中访问和修改共享数据。

核心实现步骤：

  1. 定义和初始化全局状态 在EntryAbility.ets或应用入口文件中，使用AppStorage.SetOrCreate()初始化需要共享的数据：

    // 初始化用户信息
AppStorage.SetOrCreate<string>('userName', '');
// 初始化购物车数量
AppStorage.SetOrCreate<number>('cartCount', 0);

  2. 在页面中访问和修改状态 在任何页面中，都可以通过AppStorage直接读写这些共享数据：

    // 登录成功后更新用户名
AppStorage.Set<string>('userName', '张三');

// 在首页获取用户名
let userName = AppStorage.Get<string>('userName');

// 商品详情页增加购物车数量
AppStorage.Set<number>('cartCount', AppStorage.Get<number>('cartCount') + 1);

  3. 使用@StorageProp和@StorageLink装饰器实现UI自动更新 在UI组件中，推荐使用装饰器实现数据与UI的自动同步：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct HomePage {
  // 单向同步：UI随AppStorage变化，组件内修改不写回AppStorage
  [@StorageProp](/user/StorageProp)('userName') userName: string = '';
  
  // 双向同步：组件内修改自动写回AppStorage
  [@StorageLink](/user/StorageLink)('cartCount') cartCount: number = 0;
  
  build() {
    Column() {
      Text(`欢迎您，${this.userName}`)
      Text(`购物车数量：${this.cartCount}`)
      Button('添加商品')
        .onClick(() => {
          this.cartCount++; // 自动同步到AppStorage
        })
    }
  }
}

实际应用场景示例：

  • 用户登录状态管理：登录页更新userName后，所有使用[@StorageProp](/user/StorageProp)('userName')的页面都会自动刷新显示。
  • 购物车全局计数：在任何页面修改cartCount，底部导航栏的购物车图标通过[@StorageProp](/user/StorageProp)('cartCount')会自动更新数字。

优势特点：

  • 应用级共享：数据在整个应用生命周期内有效
  • 响应式更新：使用装饰器时UI自动同步，无需手动刷新
  • 类型安全：TypeScript支持提供完整的类型检查
  • 高性能：底层优化，仅当数据实际变化时触发UI更新

对于简单的全局状态共享需求，AppStorage比状态管理库更轻量高效。复杂场景可考虑结合其他状态管理方案。

回到顶部