@LocalStorageLink修饰符

@LocalStorageLink修饰符

HarmonyOS
2024-05-26 16:03:47
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
janux

@LocalStorageLink(key) 装饰的变量是组件内部的状态数据,当这些状态数据被修改时,将会调用所在组件的 build() 方法进行UI刷新。组件通过使用 @LocalStorageLink(key) 装饰的状态变量与 AppStorage 建立双向数据绑定。当创建包含 @StorageLink 的状态变量的组件时,该状态变量的值将使用 AppStorage 中的值进行初始化,在UI组件中对 @LocalStorageLink的状态变量所做的更改将同步到 AppStorage ,并从 AppStorage 同步到任何其他绑定实例中,如 PersistentStorage 或其他绑定的UI组件。 @LocalStorageLink状态数据具有以下特征:

1. 支持多种数据类型:支持的数据类型和 @State 一致且支持 object 。

2. 需要本地初始化:必须为所有的@StorageLink变量分配初始值。

3. 数据状态全局化:使用 @LocalStorageLink修饰的数据变化后全局都会改变。

4. 数据持久化:通过搭配 PersistentStorage 接口实现数据持久化。

使用@LocalStorageLink绑定数据,当状态数据被修改时,UI会发生对应的渲染改变。示例代码如下:

@Entry @Component struct ComponentTest { 
  @StorageLink('time') time: string = "1648643734154";// 使用StorageLink标记并初始化 
  build() { 
    Column({space: 10}) { 
      Text(`父组件【${this.time}】`) // 使用time值 
        .fontSize(20) 
        .backgroundColor(Color.Pink) 
      Button('更新时间') 
        .onClick(() => { 
          this.time = new Date().getTime().toString();// 更改time的值 
        }) 
    } 
    .width('100%') 
    .height('100%') 
    .padding(10) 
  } 
}

使用@LocalStorageLink双向绑定变量。示例代码如下:

@Entry @Component struct ComponentTest { 
  
  @StorageLink('time') time1: string = "1648643734154"; 
  @StorageLink('time') time2: string = "abcdefefwefwewee"; 
  
  build() { 
    Column({space: 10}) { 
      Text(`父组件【${this.time1}】`) 
        .fontSize(20) 
        .backgroundColor(Color.Pink) 
      Item(); 
      Item(); 
      Button('更新时间') 
        .onClick(() => { 
          this.time2 = new Date().getTime().toString(); 
        }) 
    } 
    .width('100%') 
    .height('100%') 
    .padding(10) 
  } 
} 
  
@Component struct Item { 
  @StorageLink('time') time: string = "OpenHarmony"; 
  build() { 
    Text(`子组件【${this.time}】`) 
      .fontSize(20) 
      .backgroundColor(Color.Grey) 
      .onClick(() => { 
        this.time = new Date().getTime().toString(); 
      }) 
  } 
}

使用@LocalStorageLink搭配 PersistentStorage 接口可以实现数据本地持久化。

// 持久化存储key并设置默认值 
PersistentStorage.PersistProp("time", "Hello, OpenHarmony") 
  
@Entry @Component struct ComponentTest { 
  
  // 初始化time1,如果AppStorage 
  @StorageLink('time') time1: string = "1648643734154"; 
  @StorageLink('time') time2: string = "OpenHarmony"; 
  
  build() { 
    Column({space: 10}) { 
  
      Text(`父组件【${this.time1}】`) 
        .fontSize(20) 
        .backgroundColor(Color.Pink) 
  
      Item(); 
      Item(); 
  
      Button('更新时间') 
        .onClick(() => { 
          this.time2 = new Date().getTime().toString(); 
        }) 
  
      Button('跨页面数据绑定') 
        .onClick(() => { 
          router.push({uri: "pages/test/setting"}) 
        }) 
    } 
    .width('100%') 
    .height('100%') 
    .padding(10) 
  } 
} 
  
// 自定义组件 
@Component struct Item { 
  @StorageLink('time') time: string = "OpenHarmony"; 
  build() { 
    Text(`子组件【${this.time}】`) 
      .fontSize(20) 
      .backgroundColor(Color.Grey) 
      .onClick(() => { 
        this.time = new Date().getTime().toString(); 
      }) 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 21:15:41
相关问题
LocalStorageLink修饰的变量会自动保存
555浏览 • 1回复 待解决
@BuilderParam修饰的属性报错
675浏览 • 1回复 待解决
readonly修饰的数组无法获取数组元素
573浏览 • 1回复 待解决
java中显示不可映射是什么意思
3623浏览 • 1回复 待解决
数字支持货币分隔显示吗
415浏览 • 1回复 待解决
如何获取设备唯一标识
530浏览 • 1回复 待解决
Java中平台无关的换行是?
3803浏览 • 1回复 待解决
base64字串如何转为图片并保存
1039浏览 • 1回复 待解决
比如换行 \n
602浏览 • 1回复 待解决