当前位置：首页 > article >正文

ArkTS--应用状态

article 2024/11/14 1:46:30

应用状态

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

1.LocalStorage

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

1.1 页面内共享数据

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不为undefined
          this.user.age = this.user.age as number
          this.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不为undefined
          this.user.age = this.user.age as number
          this.user.age++
        })
    }
  }
}

1.2 页面间共享数据

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

第一步

src/main/ets/entryability/EntryAbility.ets

export  class MyUser{
  name?:string
  age?:number
}

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中要加载storage
    windowStage.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

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) ,全局值均可变

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() 获取值

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(() => {
          //取出对象中的属性值,取出了user
          const user:SubscribedAbstractProperty<MyUser> = AppStorage.link('user')
          user.set({name:'蔡徐坤',age:26})
        })
    }
  }
}