HarmonyOS(33) @LocalStorageProp使用指南

news2024/10/5 10:22:11

LocalStorageProp使用指南

说明
使用示例
参考资料

说明

不同于@LocalStorageLink与LocalStorage建立的双向同步关系，@LocalStorageProp装饰的变量与LocalStorage中给定属性建立单向同步关系。@LocalStorageProp(key)是和LocalStorage中key对应的属性建立单向数据同步，ArkUI框架支持修改@LocalStorageProp(key)在本地的值，但是对本地值的修改不会同步回LocalStorage中。相反，如果LocalStorage中key对应的属性值发生改变，例如通过set接口对LocalStorage中的值进行修改，或者通过@LocalStorageLink修改了LocalStorage的值，改变会同步给@LocalStorageProp(key)，并覆盖掉本地的值。
在这里插入图片描述

使用示例

下面的代码中：

Child使用 @LocalStorageProp与LocalStorage中的’Prop’属性建立单向绑定。
Parent使用 @LocalStorageLink变量装饰器与LocalStorage中的’Prop’属性建立双向绑定


let storage: LocalStorage = new LocalStorage();
@Component
struct Child {
  // @LocalStorageProp变量装饰器与LocalStorage中的'Prop'属性建立单向绑定
  @LocalStorageProp('Prop') childLinkNumber: number = 1;
  build() {
    Button(`Child Value ${this.childLinkNumber}`) // 更改将同步至LocalStorage中的'PropA'以及Parent.parentLinkNumber
      .onClick(() => {
        this.childLinkNumber += 1;
      })
  }
}
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct Parent {
  // @LocalStorageLink变量装饰器与LocalStorage中的'Prop'属性建立双向绑定
  @LocalStorageLink('Prop') parentLinkNumber: number = 1;

  build() {
    Column({ space: 15 }) {
      Button(`Parent value  ${this.parentLinkNumber}`)
        .backgroundColor(Color.Red)
        .onClick(() => {
          this.parentLinkNumber += 1;
        })
      // @Component子组件自动获得对CompA LocalStorage实例的访问权限。
      Child()
    }.alignItems(HorizontalAlign.Center)
    .width('100%')
    .margin({top:200})
  }
}