一、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);
}
}通过
- @ComponentV2修饰TaskListTeamBean数据对象
- 在TaskListTeamBean内部使用@Type()@Trace来修饰变量
- 然后再在@Entry入口页面调用：
这就是MVVM模式+状态管理V2的基本框架开发模式。