HarmonyOS 有没有状态管理V2的优秀实践或者优先案例？

Question

有没有状态管理V2的优秀实践或者优先案例

Answer 1

参考以下代码

@ObservedV2
class BasicPickData {
  @Trace fundName: string = ''
  @Trace plateName: string = ''
}

@ObservedV2
class SubPickData {
  @Trace subCardData: string = ''
  @Trace cell: BasicPickData[] = []
}

@ObservedV2
class MergeCellData {
  @Trace title: string = ''
  key: string = ''
  @Trace items: SubPickData[] = []
}

@Entry
@Component
struct HomeMainPage {
  @State testListData: MergeCellData[] = []

  aboutToAppear() {
    let mergeCellData: MergeCellData = new MergeCellData()
    mergeCellData.title = 'swiper 0'
    mergeCellData.key = 'swiperKey'
    for (let i = 0; i < 4; i++) {
      let swiperItem: SubPickData = new SubPickData()
      swiperItem.subCardData = 'subCardData'+ i
      for (let j = 0; j < 4;j++) {
        let cellData: BasicPickData = new BasicPickData()
        cellData.fundName = 'cell_' + j + '_fundName'
        cellData.plateName = 'cell_' + j + '_plateName'
        swiperItem.cell.push(cellData)
      }
      mergeCellData.items.push(swiperItem)
    }
    this.testListData.push(mergeCellData)
  }

  // 生成1-100的随机数
  getRandomVal() {
    const min = 1;
    const max = 100;
    const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;
    return randomInt
  }

  build() {
    Column() {
      Button('refresh').onClick(() => {
        setTimeout(() => {
          this.testListData[0].title = 'new swiper' + this.getRandomVal()
          for (let i = 0; i < this.testListData.length; i++) {
            this.testListData[i].title = 'new swiper' + this.getRandomVal()
            for (let j = 0; j < this.testListData[i].items.length; j++) {
              this.testListData[i].items[j].subCardData = 'new subCardData'+ j + this.getRandomVal()
              for (let x = 0; x < this.testListData[i].items[j].cell.length; x++) {
                this.testListData[i].items[j].cell[x].fundName = 'cell_' + x + 'new fundName' + x+ this.getRandomVal()
                this.testListData[i].items[j].cell[x].plateName = 'cell_' + j + 'new plateName' + j + this.getRandomVal()
              }
            }
          }
        }, 1000)
      })

      List() {
        ForEach(this.testListData, (item: MergeCellData) => {
          ListItem() {
            SwiperCom({swiperData: item})
          }
        }, (item: MergeCellData, index: number) => item.key + index)
      }
      .width('100%')
      .height('calc(100% - 56vp - 32vp)')
      .padding({ left: 14, right: 14 })
    }
    .width('100%')
    .height('100%')
  }
}

@Component
struct ListCom {
  listData?: SubPickData

  build() {
    Column() {
      Text(this.listData?.subCardData)

      List() {
        ForEach(this.listData?.cell, (item: BasicPickData, index: number) => {
          ListItem() {
            Text(item?.fundName)
          }
        }, (item: BasicPickData, index: number) => index + '')
      }
      .width('100%')
    }
  }
}

@Component
struct SwiperCom {
  swiperData: MergeCellData = new MergeCellData()

  build() {
    Column() {
      Text(this.swiperData?.title)

      Swiper() {
        ForEach(this.swiperData?.items, (item: SubPickData, index: number) => {
          ListCom({listData: item})
        }, (item: SubPickData, index: number) => index + '')
      }
    }
  }
}