鸿蒙原生开发之状态管理V2

一、ArkTS状态变量的定义：

• State：状态，指驱动UI更新的数据。用户通过触发组件的事件方法，改变状态数据。状态数据的改变，引起UI的重新渲染。

在鸿蒙原生开发中，使用ArkTS开发UI的时候，我们可以对UI进行状态变量的绑定，来进行UI渲染

基本结构如下：

@Component
struct MyComponent {
  @State count: number = 0;
  private increaseBy: number = 1;

  build() {
  }
}

@Entry
@Component
struct Parent {
  build() {
    Column() {
      // 从父组件初始化，覆盖本地定义的默认值
      MyComponent({ count: 1, increaseBy: 2 })
    }
  }
}

@State count: number = 0;//通过@State修饰绑定的变量会被UI监听，count发生变化时UI也会随之变化。

这是V1的状态管理方法。

下面我们来介绍V2状态管理

首先我们来看V2的状态修饰器：

• @ObservedV2装饰器和@Trace装饰器：类属性变化观测
• @ComponentV2装饰器：自定义组件
• @Local装饰器：组件内部状态
• @Param：组件外部输入
• @Once：初始化同步一次
• @Event装饰器：规范组件输出
• @Provider装饰器和@Consumer装饰器：跨组件层级双向同步
• @Monitor装饰器：状态变量修改监听
• @Computed装饰器：计算属性
• @Type装饰器：标记类属性的类型

@ObservedV2装饰器与@Trace装饰器

• @ObservedV2装饰器与@Trace装饰器需要配合使用，单独使用@ObservedV2装饰器或@Trace装饰器没有任何作用。
• 被@Trace装饰器装饰的属性property变化时，仅会通知property关联的组件进行刷新。
• 在嵌套类中，嵌套类中的属性property被@Trace装饰且嵌套类被@ObservedV2装饰时，才具有触发UI刷新的能力。
• 在继承类中，父类或子类中的属性property被@Trace装饰且该property所在类被@ObservedV2装饰时，才具有触发UI刷新的能力。
• 未被@Trace装饰的属性用在UI中无法感知到变化，也无法触发UI刷新。
• @ObservedV2的类实例目前不支持使用JSON.stringify进行序列化。

@ComponentV2装饰器用于装饰自定义组件：

• 在@ComponentV2装饰的自定义组件中，开发者仅可以使用全新的状态变量装饰器，包括@Local、@Param、@Once、@Event、@Provider、@Consumer等。

• @ComponentV2装饰的自定义组件暂不支持组件复用、LocalStorage等现有自定义组件的能力。

• 无法同时使用@ComponentV2与@Component装饰同一个struct结构。

• @ComponentV2支持一个可选的boolean类型参数freezeWhenInactive，来实现组件冻结功能。

@ComponentV2 // 装饰器
struct Index { // struct声明的数据结构
  build() { // build定义的UI
  }
}

通过以上状态变量的修饰，可以弥补状态管理（V1）的短板，状态管理（V1）在复杂数据类型和隔代数据同步方面可能没有状态管理（V2）更好用，所以我们大型复杂数据结构的项目可以使用状态管理（V2），在日常普通项目中使用状态管理（V1）更方便。

最后我们来看看MVVM模式的状态管理V2项目框架设计

一般鸿蒙项目的开发使用MVVM模式；ArkUI采用了Model-View-ViewModel（MVVM）架构模式，

MVVM将应用分为Model、View和ViewModel三个核心部分，实现数据、视图与逻辑的分离。通过这种模式，UI可以随着状态的变化自动更新，无需手动处理，从而更加高效地管理数据和视图的绑定与更新。

• Model：负责存储和管理应用的数据以及业务逻辑，不直接与用户界面交互。通常从后端接口获取数据，是应用程序的数据基础，确保数据的一致性和完整性。
• View：负责用户界面展示数据并与用户交互，不包含任何业务逻辑。它通过绑定ViewModel层提供的数据来动态更新UI。
• ViewModel：负责管理UI状态和交互逻辑。作为连接Model和View的桥梁，ViewModel监控Model数据的变化，通知View更新UI，同时处理用户交互事件并转换为数据操作。

常用的状态管理装饰器包括@Local、@Param、@Event、@ObservedV2、@Trace

来看这段代码：

@ObservedV2
export default class TaskListTeamBean {
  @Type(TeamBean)
  @Trace login: TeamBean[] = [new TeamBean()];
  @Type(TeamBean)
  @Trace bill: TeamBean[] = [new TeamBean()];
  @Type(TeamBean)
  @Trace community: TeamBean[] = [new TeamBean()];
  @Type(TeamBean)
  @Trace game: TeamBean[] = [new TeamBean()];
  @Type(TeamBean)
  @Trace person: TeamBean[] = [new TeamBean()];

  async loadTasks(context: common.UIAbilityContext) {
    let taskList = new ListTeamBean(new WholeBean());
    await taskList.loadTasks(context);
    this.login = taskList.taskWhole.login
    this.bill = taskList.taskWhole.bill
    this.community = taskList.taskWhole.community
    this.game = taskList.taskWhole.game
    this.person = taskList.taskWhole.person
  }


  addTask(newTask: TaskTeamBean): void {

  }

  removeTask(removedTask: TaskTeamBean): void {

  }
}

@Local taskList: TaskListTeamBean = PersistenceV2.connect(TaskListTeamBean, 'TaskList', () => new TaskListTeamBean())!;
 
  private context = getContext(this) as common.UIAbilityContext;


async aboutToAppear() {
    this.taskList = PersistenceV2.connect(TaskListTeamBean, 'TaskList', () => new TaskListTeamBean())!;
    if (this.taskList.community.length < 2) {
      await this.taskList.loadTasks(this.context);
    }
  }

通过

1. @ComponentV2修饰TaskListTeamBean数据对象
2. 在TaskListTeamBean内部使用@Type()@Trace来修饰变量
3. 然后再在@Entry入口页面调用：

这就是MVVM模式+状态管理V2的基本框架开发模式。