鸿蒙5：应用状态共享

1. 应用状态共享

1.1 AppStorageV2 应用全局UI状态存储

• 为了增强状态管理框架对应用全局UI状态变量存储的能力，开发者可以使用AppStorageV2存储应用全局UI状态变量数据。
• AppStorageV2是在应用UI启动时会被创建的单例。
• AppStorageV2将在应用运行过程保留其数据。数据通过唯一的键字符串值访问。
• AppStorageV2可以和UI组件同步，且可以在应用业务逻辑中被访问。
• AppStorageV2支持应用内多个UIAbility实例间的状态共享。

1.1.1 connect 创建或获取储存的数据

参数：

参数名	类型	必填	说明
type	TypeConstructorWithArgs<T>	是	指定的类型，若未指定key，则使用type的name作为key。
keyOrDefaultCreator	string | StorageDefaultCreator<T>	否	指定的key，或者是获取默认值的构造器。
defaultCreator	StorageDefaultCreator<T>	否	获取默认值的构造器。

说明

1、若未指定key，使用第二个参数作为默认构造器；否则使用第三个参数作为默认构造器；

2、确保数据已经存储在AppStorageV2中，可省略默认构造器，获取存储的数据；

否则必须指定默认构造器，不指定将导致应用异常；

3、key建议使用有意义的值，长度不超过255，使用非法字符或空字符的行为是未定义的。

// 将key为SampleClass、value为new SampleClass()对象的键值对存储到内存中，并赋值给as1
const as1: SampleClass | undefined = AppStorageV2.connect(SampleClass, () => new SampleClass());

// 将key为key_as2、value为new SampleClass()对象的键值对存储到内存中，并赋值给as2
const as2: SampleClass = AppStorageV2.connect(SampleClass, 'key_as2', () => new SampleClass())!;

// key为SampleClass已经在AppStorageV2中，将key为SampleClass的值返回给as3
const as3: SampleClass = AppStorageV2.connect(SampleClass) as SampleClass;

准备两个页面，A页面登录获取用户信息，B页面展示修改

• A页面登录模版，用于存入AppStorage

import { AppStorageV2, promptAction, router } from '@kit.ArkUI'
import UserInfo from '../models/UserInfo'

@Entry
  @ComponentV2
  struct AppStorageCase01 {
    @Local username: string = ""
    @Local password: string = ""

    build() {
      Column({ space: 20 }) {
        Image($r('app.media.huawei'))
          .width(60)
        TextInput({ placeholder: '请输入用户名', text: $$this.username })
        TextInput({ placeholder: '请输入密码', text: $$this.password })
          .type(InputType.Password)
        Button("登录")
          .width('100%')
      }
      .padding(20)
        .width('100%')
    }
  }

B页面登录模版，用于展示AppStorage
 

@Entry
@ComponentV2
struct AppStorageCase02 {
  build() {
    Column() {
      Row({ space: 20 }) {
        Column({ space: 10 }) {
          Text('姓名：东林')
          Text(`年龄：18岁`)
        }
      }
      .alignItems(VerticalAlign.Center)
      .padding(20)
      .width('100%')
    }
    .width('100%')
    .height('100%')
  }
}

• 准备需要跨页面共享的数据模型

@ObservedV2
  export default class UserInfo {
    @Trace name: string
    @Trace age: number

    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }
  }

• A页面存储数据

import { AppStorageV2, promptAction, router } from '@kit.ArkUI'
import UserInfo from '../models/UserInfo'

@Entry
  @ComponentV2
  struct AppStorageCase01 {
    @Local username: string = ""
    @Local password: string = ""

    build() {
      Column({ space: 20 }) {
        Image($r('app.media.huawei'))
          .width(60)
        TextInput({ placeholder: '请输入用户名', text: $$this.username })
        TextInput({ placeholder: '请输入密码', text: $$this.password })
          .type(InputType.Password)
        Button("登录")
          .width('100%')
          .onClick(() => {
            if (this.username === '') {
              promptAction.showDialog({
                message: '用户名不能为空'
              })
              return
            }
            AppStorageV2.connect(UserInfo, 'User', () => new UserInfo(this.username, 18))
            router.pushUrl({
              url: 'pages/AppStorageCase02'
            })
          })
      }
      .padding(20)
        .width('100%')
    }
  }

• B页面渲染数据

import UserInfo from '../models/UserInfo'
import { AppStorageV2, router } from '@kit.ArkUI'

@Entry
  @ComponentV2
  struct AppStorageCase02 {
    @Local user: UserInfo = AppStorageV2.connect(UserInfo, 'User', () => new UserInfo('游客', 2000))!

    build() {
      Column() {
        Row({ space: 20 }) {
          Column({ space: 10 }) {
            Text('姓名：' + this.user.name)
            Text(`年龄：` + this.user.age)
          }
        }
        .alignItems(VerticalAlign.Center)
          .padding(20)
          .width('100%')

        Button("修改数据").onClick(() => {
          this.user.name = '吕布'
          this.user.age = 99

        })

        Button('跳转到第三个页面')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/AppStorageCase03'
            })
          })
      }
      .width('100%')
        .height('100%')
    }
  }

• C页面测试共享数据

import UserInfo from '../models/UserInfo'
import { AppStorageV2 } from '@kit.ArkUI'

@Entry
  @ComponentV2
  struct AppStorageCase03 {
    @Local user: UserInfo = AppStorageV2.connect(UserInfo, 'User', () => new UserInfo('游客', 2000))!

    build() {
      Column() {
        Text('首页').fontSize(30)
        Text(this.user.name)
        Text(this.user.age.toString())
      }
    }
  }

1.1.2 remove 删除指定key的存储数据

remove

将指定的键值对数据从AppStorageV2里面删除。

如果指定的键值不存在于AppStorageV2中，将删除失败。

示例：

// 假设AppStorageV2中存在key为key_as2的键，从AppStorageV2中删除该键值对数据
AppStorageV2.remove('key_as2');

// 假设AppStorageV2中存在key为SampleClass的键，从AppStorageV2中删除该键值对数据
AppStorageV2.remove(SampleClass);

  Button("退出").onClick(() => {
        // 从AppStorageV2中删除后，user将不会再与key为hmUser的值关联
        AppStorageV2.remove('User')
        router.replaceUrl({
          url: 'pages/AppStorageCase02'
        })
      })

1.1.3 keys 获取 key

示例：

// 假设AppStorageV2中存在两个key（key_as1、key_as2），返回[key_as1、key_as2]赋值给keys
const keys: Array<string> = AppStorageV2.keys();

Button('获取所有keys').onClick(() => {
  console.log(JSON.stringify(AppStorageV2.keys()))
})

1.2 PersistenceV2持久化

为了增强状态管理框架对持久化存储UI的能力，开发者可以使用PersistenceV2存储持久化的数据。

PersistenceV2是应用程序中的可选单例对象。此对象的作用是持久化存储UI相关的数据，以确保这些属性在应用程序重新启动时的值与应用程序关闭时的值相同。

PersistenceV2提供状态变量持久化能力，开发者可以通过connect绑定同一个key，在状态变量变换和应用冷启动时，实现持久化能力。

核心方法：

• connect：创建或获取存储的数据
• remove：删除指定key的存储数据
• keys：返回所有PersistenceV2中的key
• save：手动持久化数据

• • 没有被@Trace修饰过的属性，不会关联自动持久化，有必要可以手动持久化

使用：只需要将AppStorageV2换成PersistenceV2即可

区别：AppStorageV2是内存态数据，而PersistenceV2是直接存入磁盘

@Local user: UserInfo = PersistenceV2.connect(UserInfo, 'User', () => new UserInfo({
  name: '游客',
  age: 2000
}))!

JSON.stringify(PersistenceV2.keys()