@LocalStorageLink修饰符

HarmonyOS

jshyb

2024-05-26 16:03:47

浏览

回答 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) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

使用@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(); 
      }) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

使用@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(); 
      }) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

2024-05-27 21:15:41

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

@LocalStorageLink修饰符

订阅鸿蒙技术特刊，精选内容抢先看