掌握HarmonyOS框架的ArkTs如何管理和共享状态数据

ARKTS(Ark TypeScript)是HarmonyOS应用框架的一部分,提供了一种灵活而强大的状态管理机制。在ARKTS中,AppStorage和LocalStorage是两个关键的概念,它们分别用于应用级和页面级的状态共享。通过深入了解这两个特性,我们可以更好地理解如何在应用程序中管理和共享状态数据。

AppStorage:全局状态的中枢

AppStorage是应用启动时创建的单例,其主要目的是提供应用级别的全局状态存储。这些状态数据在整个应用中都是可访问的,它们在应用运行期间保留其属性。通过唯一的键字符串,我们可以访问AppStorage中的属性,实现全局状态的共享。

与UI的交互是通过@StorageProp和@StorageLink实现的。@StorageProp用于建立单向数据同步,允许本地的修改发生,但不会同步回AppStorage中。而@StorageLink建立双向数据同步,使得本地的修改会被同步到AppStorage中,反之亦然。这为应用的状态管理提供了极大的灵活性。

// 示例代码@StorageProp('exampleKey')exampleValue: number = 42;@StorageLink('anotherKey')anotherValue: string = 'Hello, ARKTS!';

通过上述代码,我们在AppStorage中创建了两个属性:‘exampleKey’和’anotherKey’,并通过@StorageProp和@StorageLink将它们与UI组件中的变量建立了关联。这种关联使得应用状态和UI的变化能够实时同步,实现了高效的状态管理。

LocalStorage:页面级的数据共享

与AppStorage不同,LocalStorage是页面级的数据共享机制。通常应用于页面内的数据共享,它提供了一种简单而有效的方式,使页面组件能够共享状态而不需要显式的传递数据。在页面级别,LocalStorage的作用类似于组件内部的全局变量,方便在页面内各个组件之间进行状态传递。

// 示例代码let pageStorage: LocalStorage = new LocalStorage();pageStorage.set('pageTitle', 'My Awesome Page');let title: string = pageStorage.get('pageTitle');

在上述代码中,我们使用LocalStorage创建了一个页面级的存储空间,并在其中存储了页面的标题。通过get和set方法,我们能够在页面内的任何组件中访问和修改这些数据,实现了页面级别的状态共享。

与PersistentStorage和Environment的协作

AppStorage不仅可以和UI组件同步,还可以与PersistentStorage(持久化数据存储)和Environment(环境变量)协作,形成一个完整的状态管理体系。通过持久化数据的存储和环境变量的设置,我们能够实现数据的长期保存和应用环境的灵活配置。

需要注意的是,使用AppStorage与PersistentStorage时,需要注意调用顺序。在AppStorage中创建属性后,调用PersistentStorage.persistProp()时会使用AppStorage中已经存在的值,并覆盖PersistentStorage中的同名属性。因此,建议在使用PersistentStorage前访问AppStorage中的属性。

// 示例代码AppStorage.setOrCreate('appTheme', 'light');PersistentStorage.persistProp('appTheme');

从应用逻辑和UI内部使用存储

在应用逻辑中,可以通过AppStorage的静态方法来进行状态的设置和获取。而在UI内部,通过@StorageProp和@StorageLink装饰器,可以将组件的属性与AppStorage中的属性进行绑定,实现数据的双向同步。

// 示例代码@StorageProp('counter')counter: number = 0;@StorageLink('userToken')userToken: string = '';

上述代码中,counter和userToken分别与AppStorage中的’counter’和’userToken’属性建立了关联。这样,在UI中修改这些属性时,AppStorage中的数据会同步更新,反之亦然。

不建议借助@StorageLink的双向同步实现事件通知

虽然@StorageLink提供了双向同步的机制,但不建议将其用于事件通知。因为AppStorage是与UI相关的数据存储,修改会触发UI的刷新,而事件通知的成本相对较大。推荐使用emitter方式来实现事件通知,提高代码的可读性和性能。

cke_137.png

cke_138.png

// 不推荐的示例代码@StorageLink('tapIndex')tapIndex: number = -1;// 推荐的示例代码import emitter from '@ohos.events.emitter';emitter.on('onTapIndexChange', (data) => {// 处理事件通知});

通过emitter方式,我们可以更灵活地实现事件的订阅和发布,避免不必要的UI刷新,提高应用的性能。

cke_139.png

示例演练

为了更好地理解AppStorage和LocalStorage的使用,让我们通过一个简单的示例演练来展示它们的实际应用。

// 示例演练代码// AppStorage示例@StorageProp('appCounter')appCounter: number = 0;// LocalStorage示例let pageStorage: LocalStorage = new LocalStorage();@Componentstruct App {build() {Column() {// 显示AppStorage中的计数器值Text(`App Counter: ${this.appCounter}`);// 显示LocalStorage中的页面标题Text(`Page Title: ${pageStorage.get('pageTitle')}`);// 按钮,点击时AppStorage计数器加1Button('Increment App Counter').onClick(() => {this.appCounter += 1;});// 按钮,点击时修改LocalStorage中的页面标题Button('Change Page Title').onClick(() => {pageStorage.set('pageTitle', 'New Page Title');});}}}// 在另一个组件中使用@StorageLink@StorageLink('appCounter')counterFromLink: number = 0;@Componentstruct AnotherComponent {build() {Column() {// 显示通过@StorageLink关联的AppStorage计数器值Text(`Counter from Link: ${this.counterFromLink}`);}}}

上述代码中,我们创建了一个App组件,其中使用了@StorageProp和LocalStorage,演示了如何在应用级别(AppStorage)和页面级别(LocalStorage)进行状态管理。另外,通过在另一个组件中使用@StorageLink,展示了如何在不同组件之间实现状态的双向同步。

限制条件和最佳实践

在使用AppStorage和LocalStorage时,我们需要注意一些限制条件和最佳实践:

  1. 调用顺序问题: 在AppStorage中创建属性后,调用PersistentStorage.persistProp()接口时,会使用在AppStorage中已经存在的值,并覆盖PersistentStorage中的同名属性。因此,建议在使用PersistentStorage前访问AppStorage中的属性。

  1. 属性命名注意事项: 如果在AppStorage中已经创建属性后,再调用Environment.envProp()创建同名的属性,会调用失败。因此,建议AppStorage中的属性不要使用Environment预置环境变量名。

  1. 状态装饰器和事件通知: 状态装饰器装饰的变量改变会引起UI的渲染更新。如果改变的变量不是用于UI更新,只是用于消息传递,推荐使用emitter方式来实现事件通知,以减小UI刷新的成本。

  1. 合理使用@StorageProp和@StorageLink: 在应用逻辑中,可以通过AppStorage的静态方法来进行状态的设置和获取。而在UI内部,通过@StorageProp和@StorageLink装饰器,可以将组件的属性与AppStorage中的属性进行绑定,实现数据的双向同步。但要注意不要滥用双向同步机制,以避免不必要的性能开销。

  1. 事件通知的优化: 不建议借助@StorageLink的双向同步机制实现事件通知。由于AppStorage是与UI相关的数据存储,修改会触发UI的刷新,而事件通知的成本相对较大。推荐使用emitter方式来实现事件通知,提高代码的可读性和性能。

结语

通过深入理解ARKTS中的AppStorage和LocalStorage,我们能够更好地利用这两个特性进行应用状态的管理和共享。合理使用这些工具,可以提高代码的可维护性和性能,使得开发更加高效。在实际开发中,根据具体需求和场景选择合适的状态管理方式,将有助于构建更健壮、可扩展的HarmonyOS应用。

ARKTS中的AppStorage和LocalStorage为开发者提供了强大的状态管理工具,使得应用程序能够高效地共享和管理状态数据。通过与PersistentStorage和Environment的协作,可以实现更全面的状态管理和数据持久化。在开发过程中,合理使用@StorageProp和@StorageLink等装饰器,以及emitter方式,能够更好地组织和维护应用的状态逻辑。

文章转载自:华为云开发者联盟

原文链接:https://www.cnblogs.com/huaweiyun/p/17867883.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/239046.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sentinel核心类解读:Node

基本介绍 Sentinel中的簇点链路是由一个个的Node组成的,Node是一个接口。Node中保存了对资源的实时数据的统计,Sentinel中的限流或者降级等功能就是通过Node中的数据进行判断的。 Sentinel中是这样描述Node的: Holds real-time statistics…

Linux Spug自动化运维平台本地部署与公网远程访问

文章目录 前言1. Docker安装Spug2 . 本地访问测试3. Linux 安装cpolar4. 配置Spug公网访问地址5. 公网远程访问Spug管理界面6. 固定Spug公网地址 前言 Spug 面向中小型企业设计的轻量级无 Agent 的自动化运维平台,整合了主机管理、主机批量执行、主机在线终端、文件…

GAN:ImprovedGAN-训练GAN的改进策略

论文:https://arxiv.org/abs/1606.03498 代码:https://github.com/openai/improved_gan 发表:NIPS 2016 一、文章创新 1:Feature matching:特征匹配通过为生成器指定新目标来解决GANs的不稳定性,从而防止…

数据结构—二叉树

文章目录 10.二叉树(1).二叉树的基本概念(2).遍历#1.前序遍历#2.中序遍历#3.后序遍历#4.非递归中序遍历 (3).中序前/后序建树#1.中序前序遍历建树#2.中序后序遍历建树 (4).递归和二叉树基本操作#1.求树高#2.求结点数#3.求叶子结点数#4.复制树#5.判断两棵树是否相等 (5).特殊二叉…

无需繁琐编程 开启高效数据分析之旅!

不学编程做R统计分析:图形界面R Commander官方手册 R Commander是 R 的图形用户界面,不需要键入命令就可通过熟悉的菜单和对话框来访问 R 统计软件。 R 和 R Commander 均可免费安装于所有常见的操作系统——Windows、Mac OS X 和 Linux/UNIX。 本书作…

shareMouse 使用中遇到的问题

一、shareMouse 使用中遇到的问题 1、鼠标不能移动到另一个显示器 明明是两个显示器,但是 只显示一个,鼠标也不能移到另一个显示器上 后来, 设置了 wrap mouse pointer around display就好了,虽然还是显示一个显示器&#xff0c…

YOLOv8创新魔改教程(一)如何进行模块创新

YOLOv8创新魔改教程(一)如何进行模块创新 YOLOv8创新魔改教程 本人研一,最近好多朋友问我要如何修改模型创新模块,就想着不如直接开个专栏歇一歇文章,也算是对自己学习的总结,本专栏以YOLOv8为例&#xf…

Gee教程5.中间件

鉴权认证、日志记录等这些保障和支持系统业务属于全系统的业务,和具体的系统业务没有关联,对于系统中的很多业务都适用。 因此,在业务开发过程中,为了更好的梳理系统架构,可以将上述描述所涉及的一些通用业务单独抽离…

「C++」类和对象2

🎇个人主页:Ice_Sugar_7 🎇所属专栏:C启航 🎇欢迎点赞收藏加关注哦! 文章目录 🍉前言🍉构造函数🍌参数🍌默认构造函数🥝两种类型🥝编译…

C++基础 -28- 友元

友元用于访问类中的所有数据成员 类中的私有成员,类外不可访问 定义友元的格式(友元函数必须要在类内,声明) friend void show(person &b); 使用友元访问类的所有成员 #include "iostream"using namespace std…

深入理解Docker容器核心技术

文章目录 1. Linux命名空间(Namespaces)1.1 示例:PID命名空间 2. 控制组(cgroups)2.1 示例:内存控制组 3. 联合文件系统(UnionFS)3.1 示例:查看镜像的分层结构 4. Docker…

二、ZooKeeper集群搭建

目录 1、概述 2、安装 2.1 第一步:下载zookeeeper压缩包 2.2 第二步:解压 ​​​​​​​2.3 第三步:修改配置文件 ​​​​​​​2.4 第四步:添加myid配置 ​​​​​​​2.5 第五步:安装包分发并修改myid的值…