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

news2024/11/19 3:38:26

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();

@Component

struct App {

build() {

Column() {

// 显示AppStorage中的计数器值

Text(`App Counter: ${this.appCounter}`);

// 显示LocalStorage中的页面标题

Text(`Page Title: ${pageStorage.get('pageTitle')}`);

// 按钮,点击时AppStorage计数器加1

Button('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;

@Component

struct 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.coloradmin.cn/o/1276085.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Python】OpenCV库中常用函数详解和示例

在Python中,OpenCV(Open Source Computer Vision Library)是一个广泛使用的图像和视频处理库。它包含许多用于图像处理和计算机视觉任务的函数。本文对一些常用的OpenCV函数及其详细解释和示例,以帮助大家理解和使用。 目录 cv2.…

跨模态图像翻译:使用具有感知监督的多生成网络合成MR脑图像的CT图像

Cross-modality image translation: CT image synthesis of MR brain images using multi generative network with perceptual supervision 跨模态图像翻译:使用具有感知监督的多生成网络合成MR脑图像的CT图像背景贡献实验方法损失函数Thinking 跨模态图像翻译&…

使用 NRF24L01 无线收发模块进行远程控制

NRF24L01 是一款基于 2.4GHz 射频通信的低功耗无线收发模块,具有高性能和稳定性,适用于远程控制和数据传输应用。本文将介绍如何使用 NRF24L01 模块进行远程控制,包括硬件的连接和配置,以及相应的代码示例。 一、引言 NRF24L01 是…

es6之class类(未完成)

es6之class类 一、什么是类二、类的基本用法1.定义类2.constructor() 方法3.静态方法(属性)4.私有方法(属性) 三、继承 一、什么是类 类是用于创建对象的模板,类只是让对象原型的写法更加清晰、更像面向对象编程的语法。 class Pe…

matlab 多目标粒子群优化算法MOPSO

1、内容简介 略 21-可以交流、咨询、答疑 多目标、粒子群 2、内容说明 多目标粒子群优化算法MOPSO 3、仿真分析 略 %% Problem Definition TestProblem3; % Set to 1, 2, or 3 switch TestProblem case 1 CostFunction(x) MyCost1(x); nVar5; …

REST-Assured--JAVA REST服务自动化测试的Swiss Army Knife

什么是REST-Assured REST Assured是一套基于 Java 语言实现的开源 REST API 测试框架 Testing and validation of REST services in Java is harder than in dynamic languages such as Ruby and Groovy. REST Assured brings the simplicity of using these languages into t…

TCP简介及特性

1. TCP协议简介 TCP是Transmission Control Protocol的简称,中文名是传输控制协议。它是一种面向连接的、可靠的、基于IP的传输层协议。两个TCP应用之间在传输数据的之前必须建立一个TCP连接,TCP采用数据流的形式在网络中传输数据。TCP为了保证报文传输的…

网站更换IP的四大注意事项

1.对网站当中的数据进行备份 网站更换IP时可以将页面的数据库文件和站点文件通过下载工具在本地完成备份。 2.更换解析域名 从站点域名管理后台当中更换域名地址,改为新的IP地址。 3.确保IP安全 在用户更换IP前一定要确定IP是否安全,一旦IP存在不良…

如何选择适合长期投资的股票板块?

大家在学习炒股的过程中肯定没少听“板块”这个词,新手可能一脸懵逼,板块到底是啥意思?为什么会有这么多板块? 一、什么是股票板块?常见的板块分类有哪些? 板块理解起来其实很简单,它就是一种分…

java开发实战 基于Resuful风格开发接口, IocDi和nginx,以及三层架构思想,分层解耦,并使用Apifox对接口数据进行测试。

开发规范: 前后端分离: 根据需求文档开发 Resultful风格: REST(REpresentational State Transfer),表述性状态转换,它是一种软件架构风格。 POST(insert) 负责新增的操作 http://localhost:8080…

TZOJ 1386 十转换转R进制

答案&#xff1a; #include<stdio.h> char fun(int n) {if (n > 0 && n < 10) //如果是小于10进制的return n 48; //ASCII值48else if (n > 10 && n < 16) //如果是大于10进制小于16进制的return n 55; //ASCII值55elseretur…

JIRA 基本使用

该页面可以&#xff1a; 查看个人基本信息以及归属的邮件组修改常用参数配置查看指给自己的 Open 问题查看自己最近的活动记录等 权限管理 Project 权限管理 JIRA 项目有三种通用权限方案&#xff1a; 公开权限方案&#xff08;默认禁止使用此方案&#xff09;&#xff1a…

Google Chrome 下载 (离线版)

1 访问网址 Google Chrome 网络浏览器 2 点击 下载Chrome 3 直接运行 ChromeStandaloneSetup64.exe 其他&#xff1a; ####################### 谷歌浏览器 (Google Chrome) 最新版离线安装包下载 https://www.iplaysoft.com/tools/chrome/#google_vignette Google Chrome …

【二叉树】常见题目解析(2)

题目1&#xff1a;104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 题目1描述&#xff1a; 题目1分析及解决&#xff1a; &#xff08;1&#xff09;base case&#xff1a;当前节点为null时&#xff0c;以当前节点为根节点的树最大深度是0。 &#xff08;2&…

深入理解前端路由:构建现代 Web 应用的基石(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

skywalking 9.0.0开启自监控和配置集群

一、skywalking介绍 SkyWalking是有国内开源爱好者吴晟开源并提交到Apache孵化器的开源项目&#xff0c;2017年12月SkyWalking成为Apache国内首个个人孵化项目&#xff0c;2019年4月17日SkyWalking从Apache基金会的孵化器毕业成为顶级项目&#xff0c;目前SkyWalking支持Java、…

如何快速看懂市场行情?

一、看大盘指数 咱们平时所说的大盘其实指的就是上证指数&#xff0c;它是整个市场的晴雨表。大盘涨了&#xff0c;个股跟着上涨的概率就大&#xff0c;大盘跌了&#xff0c;个股被拖累下跌的概率也大。所以&#xff0c;要想在股市中尝到甜头&#xff0c;大盘分析是少不了滴&am…

git的基本命令操作超详细解析教程

Git基础教学 1、初始化配置2、初始化仓库3、工作区域和文件状态4、添加和提交文件5、git reset 回退版本6、git diff查看差异7、删除文件git rm8、.gitignore9、本地文件提交到远程仓库10、分支基础 Git&#xff1a;一个开源的分布式版本控制系统&#xff0c;它可以在本地和远程…

网络安全应急响应-Server2228(环境+解析)

网络安全应急响应 任务环境说明: 服务器场景:Server2228(开放链接)用户名:root,密码:p@ssw0rd123

2023第十二届“认证杯”数学中国数学建模国际赛赛题A完整解析

A题完整题解 写在前面假设数据预处理 问题一1 基于自适应ARIMA-BP神经网络模型的影响因素预测1.1 ARIMA模型的建立1.2 BP神经网络模型的建立1.3 基于GABP神经网络的预测模型构建1.4 自适应混合ARIMA-BP神经网络模型的建立1.5 模型求解 代码Q1_1.mQ1_2.m 完整代码与论文获取 写在…