应用状态
应用状态相关的内容需要使用模拟器或真机调试,在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})})}}
}