一、原理解析

鸿蒙 6 的状态管理核心是「存储容器 + 装饰器」，两种存储容器分工明确：

• Prop：单向绑定（只读，父组件修改后子组件同步）；
• Link：双向绑定（父子组件修改后相互同步）；
• 持久化：LocalStorage可通过persist方法持久化到沙箱，AppStorage需手动结合fs存储。

二、完整实现代码

1. 全局数据共享（AppStorage）

步骤 1：初始化全局数据（EntryAbility.ts）

import UIAbility from '@ohos.app.ability.UIAbility';
import AppStorage from '@ohos.app.ability.AppStorage';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    // 初始化全局数据（应用启动时执行）
    AppStorage.SetOrCreate('userInfo', {
      userId: '',
      userName: '游客',
      isLogin: false
    });
    AppStorage.SetOrCreate('themeMode', 'light'); // 主题模式：light/dark
  }
}

步骤 2：组件中使用全局数据（首页）

import AppStorage from '@ohos.app.ability.AppStorage';
import router from '@ohos.router';

@Entry
@Component
struct HomePage {
  // 双向绑定全局主题模式
  @StorageLink('themeMode') themeMode: string = 'light';
  // 单向绑定用户信息（只读）
  @StorageProp('userInfo') userInfo: { userId: string; userName: string; isLogin: boolean } = {
    userId: '',
    userName: '游客',
    isLogin: false
  };

  build() {
    Column({ space: 20 })
      .width('100%')
      .height('100%')
      .backgroundColor(this.themeMode === 'dark' ? '#1E1E1E' : '#FFFFFF')
      .padding(20)
      .justifyContent(FlexAlign.Center) {
      Text(`当前用户：${this.userInfo.userName}`)
        .fontSize(20)
        .fontColor(this.themeMode === 'dark' ? '#FFFFFF' : '#000000')

      Button(this.userInfo.isLogin ? '退出登录' : '去登录')
        .onClick(() => {
          if (this.userInfo.isLogin) {
            // 退出登录：修改全局数据
            AppStorage.Set('userInfo', {
              userId: '',
              userName: '游客',
              isLogin: false
            });
          } else {
            router.pushUrl({ url: 'pages/LoginPage' });
          }
        })
        .width('80%')

      Button(`切换${this.themeMode === 'light' ? '深色' : '浅色'}主题`)
        .onClick(() => {
          // 切换主题：双向绑定，所有使用themeMode的组件会同步更新
          this.themeMode = this.themeMode === 'light' ? 'dark' : 'light';
        })
        .width('80%')
    }
  }
}

步骤 3：登录页修改全局数据

import AppStorage from '@ohos.app.ability.AppStorage';
import router from '@ohos.router';

@Entry
@Component
struct LoginPage {
  @State userName: string = '';

  build() {
    Column({ space: 20 })
      .width('100%')
      .height('100%')
      .padding(20)
      .justifyContent(FlexAlign.Center) {
      TextInput({
        placeholder: '请输入用户名',
        text: this.userName
      })
        .width('80%')
        .onChange((value) => {
          this.userName = value;
        })

      Button('登录')
        .onClick(() => {
          // 登录成功：修改全局用户信息
          AppStorage.Set('userInfo', {
            userId: '10086',
            userName: this.userName || '鸿蒙用户',
            isLogin: true
          });
          router.back(); // 返回首页，首页会自动同步数据
        })
        .width('80%')
    }
  }
}

2. 页面局部数据共享（LocalStorage + 持久化）

import LocalStorage from '@ohos.app.ability.LocalStorage';
import fs from '@ohos.file.fs';
import common from '@ohos.app.ability.common';

// 初始化LocalStorage（页面级）
const pageStorage = new LocalStorage({
  searchHistory: [] // 搜索历史
});

@Entry(storage: pageStorage)
@Component
struct SearchPage {
  private context = getContext(this) as common.UIAbilityContext;
  @State searchText: string = '';
  // 双向绑定LocalStorage的searchHistory
  @LocalStorageLink('searchHistory') searchHistory: string[] = [];

  build() {
    Column({ space: 20 })
      .width('100%')
      .height('100%')
      .padding(20) {
      TextInput({
        placeholder: '请输入搜索内容',
        text: this.searchText
      })
        .width('100%')
        .onChange((value) => {
          this.searchText = value;
        })

      Button('搜索')
        .onClick(() => {
          if (this.searchText && !this.searchHistory.includes(this.searchText)) {
            // 添加搜索历史（双向绑定，LocalStorage自动更新）
            this.searchHistory.unshift(this.searchText);
            // 持久化到沙箱（可选）
            this.persistSearchHistory();
          }
        })
        .width('100%')

      // 展示搜索历史
      List() {
        ForEach(this.searchHistory, (item) => {
          ListItem() {
            Text(item)
              .width('100%')
              .height(40)
              .lineHeight(40)
          }
        })
      }
      .width('100%')
    }
  }

  // 持久化搜索历史到沙箱
  private async persistSearchHistory() {
    const filePath = `${this.context.filesDir}/searchHistory.json`;
    await fs.writeFile(filePath, JSON.stringify(this.searchHistory));
  }

  // 页面加载时读取持久化数据
  aboutToAppear() {
    this.loadPersistedHistory();
  }

  private async loadPersistedHistory() {
    const filePath = `${this.context.filesDir}/searchHistory.json`;
    if (await fs.access(filePath)) {
      const content = await fs.readFile(filePath, 'utf-8');
      this.searchHistory = JSON.parse(content) || [];
    }
  }
}

三、避坑点

1. 全局数据初始化：AppStorage的初始化需在EntryAbility的onCreate中执行，确保应用启动时数据已就绪；
2. 类型一致性：SetOrCreate和组件中绑定的变量类型必须一致，否则会导致数据同步失败；
3. 持久化差异：AppStorage不支持自动持久化，需手动结合fs存储；LocalStorage可通过persist方法自动持久化；
4. 跨页面传递：AppStorage适合全局共享（如用户状态），LocalStorage适合页面内组件共享（如搜索历史）；
5. 性能优化：避免存储过大数据（如图片），建议存储 URL 或 ID，通过其他方式加载。