【HarmonyOS】鸿蒙开发之状态管理——第2.2章-@StorageLink修饰符

@Link与@State有相同语义。@Link装饰的变量能和父组件的@State装饰的变量建立双休的数据绑定。
@Link有以下特征:

1. 本地初始化: @StorageLink装饰的变量分配初始值。
2. 支持多种数据类型: 支持与@State一样的数据类型，同时支持object。
3. 数据状态全局化: @StorageLink装饰的数据变化后全局都会改变
4. 数据持久化: 通过搭配 PersistentStorage 接口实现数据持久化

绑定数据

@Entry
@Component
export struct storageLink{
  @StorageLink('date1') data:string = "第一个案例:绑定数据"
  build(){
    Column(){
      Text("随机数:"+this.data).fontSize(36)
      Divider().margin({top:50,bottom:50})
      Button("修改标题").onClick(()=>{
        this.data = Math.random()+""
      })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

双向绑定数据

@Entry
@Component
export struct storageLink{
  @StorageLink('date2') data:string = "第二个案例:双向绑定数据"
  build(){
    Column(){
      Text("随机数:"+this.data).fontSize(36).fontColor(Color.Red).margin({bottom:10})
      CustomCpn()
      Divider().margin({top:50,bottom:50})
      Button("修改标题").onClick(()=>{
        this.data = Math.random()+""
      })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

@Component
struct CustomCpn {
  @StorageLink('date2') time: string = "自定义组件";

  build() {
    Text(`子组件【${this.time}】`)
      .fontColor(Color.Blue)
      .fontSize(20)
      .onClick(() => {
        this.time = Math.random()+""
      })
  }
}

页面间数据绑定
页面一

import router from '@ohos.router';
@Entry
@Component
export struct storageLink{
  @StorageLink('date3') data:string = "第三个案例:页面间数据绑定";//tips的值以'key'第一次出现的为准
  build(){
    Column(){
      Text("随机数:"+this.data).fontSize(36).margin({bottom:20})
      CustomCpn()
      Divider().margin({top:50,bottom:50})
      Button("修改数据").onClick(()=>{
        this.data = Math.random()+""
      })
      Button('跨页面数据绑定')
        .onClick(() => {
          router.pushUrl({url: "pages/home/arkTsIntro/stateManage/storageLink/demo3/Two"})// 打开第二个页面
        })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

@Component
struct CustomCpn {
  @StorageLink('date3') time: string = "自定义组件";
  build() {
    Text(`子组件【${this.time}】`)
      .fontColor(Color.Blue)
      .fontSize(20)
      .onClick(() => {
        this.time = Math.random()+""
      })
  }
}

页面二

@Entry
@Component
export struct storageLink2{
  @StorageLink('date3') data:string = "案例三，第二个页面";//tips的值以'key'第一次出现的为准
  build(){
    Column(){
      Text("随机数:"+this.data).fontSize(36)
      Divider().margin({top:50,bottom:50})
      Button("修改数据").onClick(()=>{
        this.data = Math.random()+""
      }).margin({bottom:20})
      Button("返回上一页").onClick(()=>{
        router.back()
      })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

持久化数据

// 持久化存储key并设置默认值
PersistentStorage.PersistProp("date4", "持久化数据")
//持久化数据
@Entry
@Component
export struct storageLink{
  @StorageLink('date4') data:string = "第四个案例:持久化数据"
  build(){
    Column(){
      Text("随机数:"+this.data).fontSize(36)
      Divider().margin({top:50,bottom:50})
      Button("修改标题").onClick(()=>{
        this.data = Math.random()+""
      }).margin({bottom:20})
      Button('跨页面数据绑定')
        .onClick(() => {
          router.pushUrl({url: "pages/home/arkTsIntro/stateManage/storageLink/demo3/Two"})// 打开第二个页面
        })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}