ArkTS--应用状态

news/2024/11/14 1:47:57/

应用状态

应用状态相关的内容需要使用模拟器或真机调试,在API 11开始也支持preview

1.LocalStorage

LocalStorage是页面级的UI状态存储,通过@Entry装饰器接收参数可以在页面内共享数据

1.1 页面内共享数据

typescript">import {MyUser} from '../model/MyUser'
//用户对象
let user:MyUser = {name:'jack',age:18}
//存储的对象
let para:Record<string,MyUser> = {'user':user}
//创建LocalStorage对象
const storage = new LocalStorage(para);
@Entry(storage)  //需要将共享的对象放入到@Entry中
@Component
struct LocalStoragePage {//获取到key是user的对象@LocalStorageProp('user') user:MyUser = {}build() {Column({space:20}){Text(this.user.name + ' ----- ' + this.user.age)Divider()ChildA()Divider()ChildB()}}
}@Component
struct ChildA {//获取到key是user的对象@LocalStorageProp('user') user:MyUser = {}build() {Column(){Text('ChildA--->' + this.user.name + ' ----- ' + this.user.age).onClick(()=>{//断言this.user.age不为undefinedthis.user.age = this.user.age as numberthis.user.age++})}}
}@Component
struct ChildB {//获取到key是user的对象@LocalStorageProp('user') user:MyUser = {}build() {Column(){Text('ChildB--->' + this.user.name + ' ----- ' + this.user.age).onClick(()=>{//断言this.user.age不为undefinedthis.user.age = this.user.age as numberthis.user.age++})}}
}

1.2 页面间共享数据

在UIAbility创建LocalStorage通过loadContent提供给加载的窗口

第一步

src/main/ets/entryability/EntryAbility.ets

typescript">export  class MyUser{name?:stringage?:number
}
typescript">import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import {MyUser} from '../model/MyUser'export default class EntryAbility extends UIAbility {//用户对象user:MyUser = {name:'jack',age:18}//存储的对象para:Record<string,MyUser> = {'user':this.user}//创建LocalStorage对象storage:LocalStorage = new LocalStorage(this.para)//注意:windowStage.loadContent中要加载storagewindowStage.loadContent('pages/Index',this.storage, (err) => {if (err.code) {hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');return;}hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');});}
}

Index.ets

typescript">import {MyUser} from '../model/MyUser'
//获取LocalStorage对象
const storage = LocalStorage.getShared()
@Entry(storage)
@Component
struct Index {//获取到key是user的对象@LocalStorageProp('user') user:MyUser = {}build() {Column(){Text(this.user.name + ' ----- ' + this.user.age)Text(JSON.stringify(this.user))}}
}

2.AppStorage

AppStorage是在应用启动的时候会被创建的单例。它的目的是为了提供应用状态数据的中心存储,这些状态数据在应用级别都是可访问的。AppStorage将在应用运行过程保留其属性。属性通过唯一的键字符串值访问

2.1 通过UI装饰器使用

AppStroage 是应用全局的UI状态存储,是和应用的进程绑定的,由UI框架在应用程序创建的时候创建,为应用程序UI状态属性提供了中央存储。

  • 如果初始化使用AppStorage.setOrCreate(key,value)
  • 单向@StorageProp(key),组件内的值不变的
  • 双向@StorageLink(key) ,全局值均可变
typescript">import {MyUser} from '../model/MyUser'
//创建AppStorage
AppStorage.setOrCreate('user',{name:'jacklove',age:18})@Entry
@Component
struct AppStoragePage {//获取// @StorageProp('user') user:MyUser = {}@StorageLink('user') user:MyUser = {}build() {Column(){Text(`用户名:${this.user.name},年龄:${this.user.age}`).onClick(() => {this.user.age = this.user.age as number;//断言它是number类型this.user.age++});ChildC()}}
}@Component
struct ChildC {//获取// @StorageProp('user') user:MyUser = {}@StorageLink('user') user:MyUser = {}build() {Text(`ChildC ---> 用户名:${this.user.name},年龄:${this.user.age}`).onClick(() => {this.user.age = this.user.age as number;//断言它是number类型this.user.age++})}
}

2.2 通过逻辑使用

  • AppStorage.Get(key) 获取数据
  • AppStorage.Set(key,value) 覆盖数据
  • const user:SubscribedAbstractProperty = AppStorage.link(‘user’) 根据属性获取属性的值
  • link.set(value) 修改值
  • link.get() 获取值
typescript">import {MyUser} from '../model/MyUser'
import promptAction from '@ohos.promptAction'AppStorage.setOrCreate<MyUser>('user',{name:'rose',age:20})@Entry
@Component
struct AppStroage2Page {@StorageLink('user') user:MyUser = {}build() {Column({space:30}){Text('Get').onClick(()=>{//只做数据的获取const user = AppStorage.get<MyUser>('user');promptAction.showToast({message:JSON.stringify(user)})console.log('hsy',JSON.stringify(user))})Text('Set').onClick(() => {//只做数据的设置AppStorage.set<MyUser>('user',{name:'jack爱',age:30})})Text('Link').onClick(() => {//取出对象中的属性值,取出了userconst user:SubscribedAbstractProperty<MyUser> = AppStorage.link('user')user.set({name:'蔡徐坤',age:26})})}}
}

http://www.ppmy.cn/news/1546309.html

相关文章

MySQL OnlineDDL添加字段

alter 添加字段 5.7 默认是algorithminplace以及locknone来进行DDL操作&#xff0c;但是添加列整个执行过程中也会部分涉及到Copy Table。 如果有碎片比较大&#xff0c;因为会copy表会碎片整理&#xff0c; 添加字段成功后有可能磁盘使用空间降低&#xff0c;添加过程中磁盘…

如何编写有效的Prompt模板:提升大模型性能的关键

如何编写有效的Prompt模板&#xff1a;提升大模型性能的关键 ​ 在大模型的应用中&#xff0c;编写一个好的Prompt至关重要。Prompt用于定义智能体的行为模式&#xff0c;正确的Prompt能帮助智能体更好地理解用户的需求并做出恰当的回应。它直接影响模型输出的质量和相关性&am…

2024强网杯Proxy

代码审计 首先分析go语言代码 package mainimport ("bytes""io""net/http""os/exec""github.com/gin-gonic/gin" )type ProxyRequest struct {URL string json:"url" binding:"req…

鸿蒙-promptAction.showToast基于PC屏幕底部提示

PC端app缩小&#xff0c;右击出菜单后&#xff0c;点菜单项 菜单关闭&#xff0c;并弹promptAction.showToast提示&#xff0c;但提示是基于PC底部弹提示的&#xff0c;需要的是基于app底部弹提示 原因是UIContext是右击菜单的UIContext&#xff0c;需要拿到菜单下面UI的UICont…

【论文复现】MSA+抑郁症模型总结(三)

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀MSA抑郁症模型 热门研究领域&#xff1a;情感计算的横向发展1. 概述2. 论文地址3. 研究背景4. 主要贡献5. 模型结构和代码6. 数据集介绍7. 性…

Flutter常用命令整理

Flutter常用命令 前言Flutter 单元测试依赖更新开发与调试其他常用命令end 前言 做flutter开发已经有一段时间了&#xff0c;flutter 作为跨平台框架&#xff0c;对于开发效率&#xff0c;有很大的提升&#xff0c;虽然在使用过程中存在一些坑&#xff0c;比如稀奇古怪的适配、…

Elasticsearch常用接口_添加数据

插入es数据&#xff1a;_index/_type/ POST { "tabTitle": "森图表_test", "chtTabTitle": "森图表_test", "status": 0 } 注意&#xff1a;Elasticsearch 6.0.0及更高版本中&#xff0c;索引只能包含一个映射类型

屏幕后期处理

1、屏幕后期处理效果 屏幕后期处理效果&#xff08; Screen Post-Processing Effects&#xff09;是一种在渲染管线的最后阶段应用的视觉效果&#xff0c;允许在场景渲染完成后对最终图像进行各种调整和效果处理&#xff0c;从而增强视觉体验 常见的屏幕后期处理效果有&#x…