1. 组件级变量的状态管理装饰器仅能在页面内,即一个组件树上共享状态变量。
    如果开发者要实现应用级的,或者多个页面的状态数据共享,就需要用到应用级变量的状态管理。

1. LocalStorage(@LocalStorageProp/@LocalStorageLink)

  1. LocalStorage 是页面级UI状态存储,通常用于UIAbility内、页面间的状态共享。
  2. 用于存储页面级的状态数据,位于 LocalStorage 中的状态数据可以在一个页面内的所有组件中共享。

1.1 创建 LocalStorage 实例,并初始化状态变量

let storage = new LocalStorage({ count: 0 }) // 创建新实例并使用给定对象初始化

1.2 将 LocalStorage 实例绑定到页面的入口组件

@Entry(storage)
@Component
struct Index { build(){} }

1.3 在页面内的组件访问 LocalStorage

  1. ArkTs 提供了俩个装饰器用于访问 LocalStorage,分别是 @LocalStorageProp 和 @LocalStorageLink ,@LocalStorageProp 装饰的变量可以和 LocalStorage 实现单向同步,@LocalStorageLink 装饰的变量可以和 LocalStorage 实现双向同步。
    在这里插入图片描述

2. AppStorage(@StorageProp/@StorageLink)

  1. AppStorage 是应用全局的UI状态存储,是和应用的进程绑定的,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储。
  2. 用于存储应用级的状态数据,位于 AppStorage 中的状态数据可以在整个应用的所有组件中共享。
  3. AppStorage 变量的初始化操作必须得在访问这个变量之前执行,一般放在应用的第一个页面初始化。AppStorage.setOrCreate('currentTabIndex', 0);

2.1 初始化状态变量

AppStorage.SetOrCreate('count', 0);
// or
AppStorage.setOrCreate('currentTabIndex', 0);

2.2 在整个应用内的组件中访问 AppStorage

  1. ArkTs 提供了俩个装饰器用于访问 AppStorage 实例,分别是 @StorageProp 和 @StorageLink,@StorageProp 装饰的变量可以和 AppStorage 实现单向同步,@StorageLink 装饰的变量可以和 AppStorage 实现双向同步。
    在这里插入图片描述

2.3 AppStorage

3. PersistentStorage

  1. LocalStorage 和 AppStorage 都是将状态数据保存在内存中,应用一旦退出,数据就会被清理,如果需要对数据进行持久化存储,就需要用到 PersistentStorage。比如应用的登录状态。
  2. PersistentStorage 可以将指定的 AppStorage 中的属性存储到磁盘中,并且 PersistentStorage 和 AppStorage 的属性会自动建立双向绑定,开发者不能直接访问 PersistentStorage 中的属性,只能通过 AppStorage 进行访问。
  3. PersistentStorage 变量的初始化操作必须得在访问这个变量之前执行,一般放在应用的第一个页面初始化。PersistentStorage.persistProp('token', '');
// 将 AppStorage 中的 count 属性存储到磁盘或文件中,需要注意的是 AppStorage 中不需要单独初始化声明 count 这个属性,PersistentStorage 的这个 .PersistProp() 方法会自动在 AppStorage 中创建一个属性出来。
PersistentStorage.PersistProp('count', 0); 
// or
PersistentStorage.persistProp('token', '')

@Entry
@Component
struct Index {
  @StorageLink('count') count: number = 0

  build() {
    Row() {
      Column() {
        // 应用退出时会保存当前结果。重新启动后,会显示上一次的保存结果
        Text(`${this.count}`).fontSize(50)
          .onClick(() => {
            this.count += 1;
          })
      }
    }
  }
}

4. Environment

  1. 开发者如果需要应用程序运行的设备的环境参数,以此来作出不同的场景判断,比如多语言,暗黑模式等,需要用到 Environment 设备环境查询。
  2. @StorageProp 关联的环境参数可以在本地更改,但不能同步回 AppStorage 中,因为应用对环境变量参数是不可写的,只能在Environment中查询。

4.1 将设备运行的环境变量存入 AppStorage 中

Environment.EnvProp('languageCode', 'en');

4.2 在组件中访问 Environment

@StorageProp('languageCode') lang: string = 'en';

4.3 在组件中查询使用 Environment

// 使用 Environment.EnvProp 将设备运行 languageCode 存入 AppStorage 中;
Environment.EnvProp('languageCode', 'en');
// 从 AppStorage 获取单向绑定的 languageCode 的变量
const lang: SubscribedAbstractProperty<string> = AppStorage.Prop('languageCode');

if (lang.get() === 'zh') {
  console.info('你好');
} else {
  console.info('Hello!');
}

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部