概述

本教程将深入探讨HarmonyOS应用中的状态管理机制，包括组件状态、页面间数据传递、以及数据持久化等关键概念。我们将通过实际案例来展示如何有效管理应用中的数据流。

状态装饰器

1. @State装饰器

用于组件内部状态管理：

@State message: string = 'Hello World';
@State currentPageIndex: number = 0;
@State hasLogin: boolean = false;

2. @StorageProp装饰器

用于持久化数据：

@StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';

3. @StorageLink装饰器

用于共享状态：

@StorageLink('userData') userData: userInfoList[] = [];

数据流管理

1. 页面参数传递

class routerParams {
  pageIndex: number
  constructor(pageIndex: number) {
    this.pageIndex = pageIndex
  }
}

// 获取路由参数
async aboutToAppear() {
  const params = router.getParams() as routerParams
  this.currentPageIndex = params.pageIndex ? params.pageIndex : 0
}

2. 状态监听

使用@Watch装饰器监听状态变化：

@State @Watch('handleSearch') inputText: string = ''

handleSearch(propName: string): void {
  // 处理搜索逻辑
  this.getHotScenicHandle()
}

最佳实践

1. 状态初始化

在生命周期函数中初始化状态：

onPageShow(): void {
  const myParams: object = router.getParams()
  this.title = myParams['title']
  this.scenicSpotsParentId = myParams['id']
  this.getDetailData()
}

2. 状态更新

// 更新当前展示的景点数据
.onClick(() => {
  this.nowSpotsData = object
})

3. 加载状态管理

@State loadingStatus: string = ''

getDetailData() {
  this.loadingStatus = LoadingStatus.LOADING
  try {
    // 数据加载逻辑
    this.loadingStatus = LoadingStatus.SUCCESS
  } catch {
    this.loadingStatus = LoadingStatus.FAILED
  }
}

进阶技巧

1. 条件渲染

if (this.loadingStatus === LoadingStatus.LOADING) {
  MyLoadingProgress()
} else if (this.loadingStatus === LoadingStatus.FAILED) {
  notFound()
} else {
  // 渲染主要内容
}

2. 数据持久化

// 使用StorageProp进行数据持久化
@StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';

3. 组件通信

// 父组件向子组件传递数据
Mine({currentPageIndex: this.currentPageIndex})

总结

通过本教程，我们深入学习了HarmonyOS应用中的状态管理机制。掌握了@State、@StorageProp、@StorageLink等装饰器的使用，以及如何有效管理应用中的数据流。这些知识对于开发高质量的HarmonyOS应用至关重要。