一、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的基本框架開發模式。
