【HarmonyOS - ArkTS - 状态管理】_arkts 可以用vuex

概述

本文主要是从页面和应用级两个方面介绍了ArkTS中的状态管理的一些概念以及如何使用。可能本文比较粗略，细节化请前往官网(【状态管理】)学习，若有理解错误的地方，欢迎评论指正。

装饰器总览

由于下面会频繁提及到装饰器，所以来头就将会提及到了列举出来，做个简单介绍。

• @State 定义组件的响应式数据，这个状态发生改变会触发UI更新，定义时必须要赋予一个默认值。
• @Prop: 定义由父组件传递过来的参数，是单向的，子组件改变该值不会影父组件 父组件通过prop = this.state.prop来传值,复制的数据源
• @Link 定义一个双向绑定的值，子组件也可以改变父组件的值，类似Vue中的v-modal，父组件使用$来传递值的引用 prop = $prop，使用的是数据源的引用
• @Provide 在上级组件通过该装饰器定义需要共享的数据（双向的，子组件也可以更新值）
• @Consume 上级组件通过@Provide提供了共享数据，在下级组件就可以通过@Consume来获取，其中值的key要一致。
• @Watch 状态监听，第一次初始化的时候不会调用。@Watch不能单独使用，需要和其他装饰器一起，常见于@Prop、@State、@Link来监听状态 。@Watch在ArkUI框架内部判断数值有无更新使用的是严格相等（===）
• @Observed / @ObjectLink ：用于解决通过@State定义嵌套对象/数组等复杂变量时，只能通过将整体替换来触发更新的问题。其中@Observed 用来修饰class，表示该类中的属性需要被监控，然后在组件中通过@ObjectLink来接收一个@Observed 修饰的class类型的变量，这样当class中的属性变化时，就会触发UI更新。原理就是当使用@Observed 修饰一个class的时候，会对这个class进行代理，代理setter、getter。当子组件通过@ObjectLink接收该class的类型变量时，会自动将@ObjectLink本身注册到@Observed修饰的代理class中，当class的属性改变，就会通过代理来通过所有订阅该class类型变量更新。
• $$语法：内置组件双向同步，其实就是将变量通过$$ 运算符传递给内置的ArkUI内置组件后，内置组件就可以改变组件内我们通过@State、@Prop、@Link定义的变量值。目前只支持Refresh组件的refreshing参数。
• @LocalStorageProp: 单向流，复杂数据的方式，组件内部改变不会影响源LocalStorage值，只会影响并更新自身组件。
  @LocalStorageLink： 双向流，添加数据引用的方式，组件内部改变会写会到LocalStorage中并同步其他订阅（@LocalStorageProp、@LocalStorageLink）了该数据的组件更新。
• @StorageProp、@StorageLink：同上面一样，@Prop是单向状态，@Link是双向的，用于获取AppStorage的状态

不管单向还是双向初始化时，都必须设置默认值，以便当LocalStorage/AppStorage中没有该key时，通过get能获取到正确的值（设定的默认值）

PS： 使用Link这种双向数据，需要注意UI渲染更新的成本。

页面组件（单个页面组件树的上级层共享）的状态管理

这个比较简单，就是通过@Prop、@Link的方式由父组件传递给子组件。

@Prop：单向传递，值的复制。通过this.xxx传递到子组件，子组件通过@Prop接收状态，修改prop不会影响到夫组件

@Link： 双向传递，值的引用。通过$prop的方式来将值的引用传递给子组件。子组件通过@Link的方式接收，值改变会同步父组件改变并触发渲染。

@Provide/@Consume：用于单个组件树的上下级状态共享。类比Vue中的（Provide/inject）或者React中的上下文(Context)。上层组件通过@Provide提供状态，以该组件为root的组件树中其他下层组件都可以通过@Consume来订阅需要的状态。

APP应用级别的状态管理

LocalStorage - 单个UIAbility

根据不同的注入方式，LocalStorage可以作为UIAbility级别（跨组件）的状态共享（类似Vuex），也可以作为组件内部单个树上下层共享（类似上面的@Provide、@Consume）

应用（单个UIAbility）级别状态共享 - 类似Vuex

在启动应用程序时，会先创建一个Stage，然后加载页面，在onWindowStageCreate生命周期（UIAbility的生命周期）中，将LocalStorage注入，这时候在LocalStorage所有的数据都可以跨组件共享。

// EntryAbility.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  para:Record<string, number> = { 'PropA': 47 };
  storage: LocalStorage = new LocalStorage(this.para);

  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent('pages/Index', this.storage);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

全局注入之后，在组件内通过GetShared根据key获取值然后将获取到的storage通过@Entry参数的形式注入到组件内部。

import router from '@ohos.router';

let storage = LocalStorage.GetShared()
@Entry(storage)
@Component
struct Page {
  @LocalStorageLink('PropA') propA: number = 2;

  build() {
    Row() {
      Column() {
        Text(`${this.propA}`)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button("Change propA")
          .onClick(() => {
            this.propA = 100;
          })

        Button("Back Index")
          .onClick(() => {
            router.back()
          })
      }
      .width('100%')
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

组件上下级共享 - 类似@Provide、@Consume

LocalStorage可以创建多个，就算在创建Stage的时候注入了一个全局的LocalStorage，也可以在组件内创建一个自己的LocalStorage数据库，在组件内创建然后在组件装饰器的@Entry作为参数传入，就类似@Provide、@Consume支持以这个组件为根节点的组件树共享。

let storage = new LocalStorage({ countStorage: 1 });

@Entry('storage')
@Component
struct Child {
  // 子组件实例的名字
  label: string = 'no name';
  // 和LocalStorage中“countStorage”的双向绑定数据
  @LocalStorageLink('countStorage') playCountLink: number = 0;

  build() {
    Row() {
      Text(this.label)
        .width(50).height(60).fontSize(12)
      Text(`playCountLink ${this.playCountLink}: inc by 1`)
        .onClick(() => {
          this.playCountLink += 1;
        })
        .width(200).height(60).fontSize(12)
    }.width(300).height(60)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

AppStorage

AppStorage就是LocalStorage的一个单例，所以它所有的属性方法都是静态的，而且也可以在UI组件内部和应用级别进行状态管理。

和LocalSTorage的区别：

• LocalStorage主要是单个UIAbility中多个组件的状态管理，而AppStorage是整个应用级别的状态管理可以用于多个UIAbility共享（一个应用可能有多个UIAbility）。
• LocalStorage的数据需要传入@Entry装饰器进行共享，而AppStorage直接通过@StorageLink就可以获取

UI组件内部状态管理

通过@StorageProp、@StorageLink来获取值

AppStorage.SetOrCreate('count', 1);

@Entry
@Component
struct TaskPage {
  @StorageProp('count') pageCount: number = 1 // 单向，不会改变AppStorage的值
  // @StorageLink('count') pageCOunt: number = 1 双向，会改变源数据
  build()
  {
    Text('Text')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

应用级别状态共享

通过SetOrCreate创建变量之后，在所有的UIAbility都可以通过Get来获取数据的值。

AppStorage.SetOrCreate('count', 1);
AppStorage.Get('count') // 1
1
2

其他用途

AppStorage除了上面提到的可以用于组件内/应用状态管理，主要还可以和数据持久化（PersistentStorage）和环境变量（Environment）使用,只要AppStorage中的值变化，PersistentStorage和Environment中的值也会变化，新值会覆盖旧值，并且在PersistentStorage和Environment中不能创建AppStorage已经有的属性，因为每次AppStorage更新（新增/删除变量）都会同步到PersistentStorage和Environment中，所有AppStorage中有的，其他两个中自然也有。

持久化存储

上面提到的AppStorage除了状态管理之外还和PersistentStorage和Environment有关，现在介绍一下PersistentStorage。

因为AppStorage是运行时保存在内存的数据，当应用关闭之后，保存的数据就被销毁了。为了将一个数据保存在用户本地，在第二次打开应用时能直接访问，所以出现了PersistentStorage。

PersistentStorage是通过写文件的方式，将数据写入文件然后保存在用户磁盘（同步写入）达到持久化的目的。

PersistentStorage是和AppStorage双向绑定的，可以理解为PersistentStorage是AppStorage的子集，通过API来设置AppStorge的哪些属性需要保持在PersistentStorage中进行持久化存储。

当应用启动之后，会先调用PersistentStorage来获取数据，如果没有则去AppStorage中查找，如果没有就在AppStorage中创建该属性并使用默认值进行初始化，然后写回到PersistentStorage。

PersistentStorage只能保存基本的简单类型(number、string、boolean、enum),并且由于写入是同步保存在用户磁盘上的，所以大小一般小于2KB。
下面代码表示：在UI内通过PersistProp（PersistentStorage初始化值的API），然后会在AppStorage上创建相同的属性（如果没有），在组件内通过@StorageLink去获取AppStorage的值（AppStorage的值和PersistentStorage值是一致的 -> 子集）

PersistentStorage.PersistProp('aProp', 47);

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @StorageLink('aProp') aProp: number = 48

  build() {
    Row() {
      Column() {
        Text(this.message)
        // 应用退出时会保存当前结果。重新启动后，会显示上一次的保存结果
        Text(`${this.aProp}`)
          .onClick(() => {
            this.aProp += 1;
          })
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Environment设备环境参数

Environment中保存的是当前设备的一些配置参数，比如国际化语言、暗黑模式…。

Environment只能保存简单的基本类型，并且是内置的环境参数，不可修改，只能访问。
在应用中一般是将我们需要的Environment配置注入到AppStorage中，然后在组件中进行访问。

@StorageProp： 值的复制，可以在组件内改变，但是不会写回到AppStorage中
@StorageLink：值的引用，会写回到Appstorage，但是不会改变Environment中的值，因为Environment是只读的。

数据更新链路：Environment -> AppStorage -> Components
下面的代码表示在UI组件内获取环境配置并使用。

// 将设备languageCode存入AppStorage中
Environment.EnvProp('languageCode', 'en');

@Entry
@Component
struct Index {
  @StorageProp('languageCode') languageCode: string = 'en';

  build() {
    Row() {
      Column() {
        // 输出当前设备的languageCode
        Text(this.languageCode)
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

状态监听@Watch和$$运算符

@Watch

@Watch使用全等(===)的方式来对单个变量进行变化监控，需要传入一个callback，发生改变就会调用该函数，默认第一次初始化的时候不会调用（undefined->value）。可以类比Vue中的Watch监听。

@Watch是用于响应数据的监听，一般于@Prop、@Link、@StorageProp…等这些申明状态的修饰器连用

@Prop @Watch('callback') state: number = 0;

// changedPropertyName：传入的监听的属性名
// 一般当多个Watch监听状态并使用同一个callback处理的时候，可以通过该属性名分别处理
callbakc = (changedPropertyName: string) => {}
1
2
3
4
5

PS：

• 不要在@Watch的回调中改变监听的状态值，否则会造成死循环
• 不要在回调中通过async/await来进行异步任务，因为@Watch主要是用于快速计算逻辑，异步任务可能会导致渲染性能问题

$$ 运算符

$$是内置组件双向同步，因为ArkTs内置了申明式UI（ArkUI），可以通过标签的方式直接使用UI组件，但是要想获取组件内属性变量的变化，就需要手动进行监听复制，ArkTS提供的$$ 运算符，能实现内置组件属性和传入变量的双向绑定，可以类比Vue中的v-modal语法糖。

下面代码就是将自定义的组件状态isRefreshing和内置组件Refresh的refreshing双向绑定，内置组件的refreshing变化会同步自定义组件状态isRefreshing的变化。

@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false
  @State counter: number = 0

  build() {
    Column() {
      Text('Pull Down and isRefreshing: ' + this.isRefreshing)
        .fontSize(30)
        .margin(10)

      Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
        Text('Pull Down and refresh: ' + this.counter)
          .fontSize(30)
          .margin(10)
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('Refresh onStateChange state is ' + refreshStatus)
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

PS：

• 当前$$支持基础类型变量，以及@State、@Link和@Prop装饰的变量。
• 当前$$仅支持Refresh组件的refreshing参数。
• $$绑定的变量变化时，会触发UI的同步刷新。

回顾

上面我们从页面组件级别、单个UIAbility级别、整个APP应用级别简单介绍了一下状态管理的知识，可以查看下图来梳理一下，希望对大家有所帮助。

下图主要画出了整个APP的状态流程。 从书写的Js/Ts代码逻辑 -> 启动应用调用(AppStorage\LocalStorage\Persistent) -> Components组件中状态共享 -> 父子组件共享

说个题外话，有兴趣的小伙伴可以关注一下微信公粽号【大前端小册子】，以便随时随地可以一起学习探讨。