问题

我有两个不相关的页面，比如“个人资料页”和“设置页”。它们都需要显示用户名。如果用户在“设置页”修改了用户名，我希望“个人资料页”在下次显示时能自动更新。我不想通过路由参数层层传递，因为这两个页面可能没有直接的导航关系。

核心概念解析

AppStorage是整个应用进程共享的单例KeyValue存储系统。它在应用启动时创建，在应用退出时销毁。存放在AppStorage中的数据是“响应式”的，这意味着当数据变化时，依赖这些数据的UI组件会自动重新渲染。

实现效果

完整示例代码

import router from '@ohos.router';

// 初始化一个全局的 'userName' 状态
AppStorage.setOrCreate('userName', '鸿蒙开发者');


@Entry
@Component
struct ProfilePage {
  // 1. 使用 @StorageLink 与 AppStorage 中的 'userName' 建立双向绑定
  @StorageLink('userName') userName: string = '';

  build() {
    Column() {
      Text('个人资料')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 30 })

      // 用户信息卡片
      Column({ space: 15 }) {
        Image($r('app.media.background')) // 假设有一个头像图标
          .width(80)
          .height(80)
          .borderRadius(40)

        Text(`用户名: ${this.userName}`)
          .fontSize(20)
          .fontWeight(FontWeight.Medium)
      }
      .width('90%')
      .padding(20)
      .backgroundColor('#FFFFFF')
      .borderRadius(12)
      .shadow({ radius: 8, color: '#1A000000', offsetX: 0, offsetY: 2 })

      Blank()

      Button('前往设置页修改')
        .width('80%')
        .margin({ bottom: 20 })
        .onClick(() => {
          router.pushUrl({ url: '/pages/1221/SettingsPage' });
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
  }
}



==========================================

import router from '@ohos.router';

@Entry
@Component
struct SettingsPage {
  // 同样使用 @StorageLink 绑定，这样如果在此页面修改，ProfilePage也能感知到
  @StorageLink('userName') currentUserName: string = '';
  // 本地状态，用于输入框的临时值
  @State inputText: string = '';

  aboutToAppear() {
    // 页面出现时，用全局状态初始化输入框的值
    this.inputText = this.currentUserName;
  }

  build() {
    Column() {
      Text('设置')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 50, bottom: 30 })

      // 用户名设置项
      Row() {
        Text('用户名')
          .fontSize(18)
          .layoutWeight(1)

        TextInput({ placeholder: '请输入新用户名' })
          .width('60%')
          .fontSize(16)
          .onChange((value: string) => {
            this.inputText = value;
          })
      }
      .width('90%')
      .padding(16)
      .backgroundColor('#FFFFFF')
      .justifyContent(FlexAlign.SpaceBetween)
      .borderRadius(8)

      Blank()

      Button('保存修改')
        .width('80%')
        .margin({ bottom: 20 })
        .onClick(() => {
          // 2. 点击保存时，更新 AppStorage 中的值
          AppStorage.setOrCreate('userName', this.inputText);
          console.info(`用户名已更新为: ${this.inputText}`);
          // 提示用户并返回
          // 可以使用 promptAction.showToast({ message: '保存成功' }) 等方式提示
          router.back();
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
  }
}