HarmonyOS 鸿蒙Next如何实现AppStorage存储的数据与组件双向同步？

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何实现AppStorage存储的数据与组件双向同步？

专题：ArkUI（eTS）常见UI效果汇总（更新中）

通过使用@StorageLink(key)装饰的状态变量，与AppStorage建立双向数据绑定，AppStorage的数据变化与@StorageLink修饰的变量同步变化。

20220407_175428_1.gif


@Entry
@Component
struct Index {
@StorageLink(‘link’) varA: number = 2


build() {
Column() {
Text(‘演示@StorageLink功能’).fontSize(16).fontColor(0xaa3300).margin({bottom:10})
Text(${<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.varA}).fontSize(26).fontColor(0x0033aa)
Button(‘通过AppStorage修改变量’).onClick(() => {
AppStorage.Set<number>(‘link’, AppStorage.Get<number>(‘link’) + 1)
}).margin({top:10})
Button(‘直接修改@StorageLink修饰变量’).onClick(() => {
this.varA+=1
}).margin({top:10})
}
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

Harmonyos Next教程
6 回复
学习了，明白了，谢谢楼主的文章。
把 @StorageLink 换成 [@StorageProp](/user/StorageProp) ,可以实现一样的效果,区别在哪呀,哥

@StorageLink是双向的 @StorageProp是单向的

期待HarmonyOS能在未来推出更多针对特定场景的优化功能。

有图有真相，学习了

HarmonyOS 鸿蒙Next实现AppStorage存储的数据与组件双向同步，主要通过@StorageLink装饰器实现。@StorageLink允许组件中的状态变量与AppStorage中的特定键（key）建立双向绑定，这样当AppStorage中的数据发生变化时，组件中的状态也会相应更新，反之亦然。

具体实现步骤如下：

  1. 定义状态变量：在组件中，使用@StorageLink('key')装饰器来定义需要双向同步的状态变量。这里的'key'是AppStorage中对应数据的键。

  2. 数据同步：当AppStorage中'key'对应的数据发生变化时，所有使用了@StorageLink('key')装饰器的组件的状态变量都会自动更新为最新的值。同样，当组件中的状态变量发生变化时，也会自动同步到AppStorage中对应的'key'下。

  3. 使用场景：这种双向同步机制特别适用于需要在多个页面或组件间共享状态变量的场景，如用户登录状态、购物车信息等。

如果在使用过程中遇到任何问题，建议检查@StorageLink的使用是否正确，包括键名是否一致、数据类型是否匹配等。如果问题依旧没法解决，请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html ，以获取更专业的帮助。

回到顶部