HormonyOS--状态管理

状态管理基本概念

我们想要制作不是一个静态无法操作的页面，而是能够实现用户与界面交互的动态变更，我们就要引入状态这个概念。

假设一个买菜软件下的，点击一下加按钮，旁边的数字就会加1，如果该变量不是状态变量，就算该变量改变了，UI界面也是不会改变的，要达到UI界面实时的更新，就要使它成为状态变量。

鸿蒙使用装饰器来完成这一操作，被装饰的变量就可以成为状态变量，当数值改变时，就会引起UI界面的重新刷新，实现实时更新。

此外，鸿蒙提供了不同的装饰器可以使得状态变量能够在组件内，父子组件，子孙组件以及跨组件进行状态的更新

MVVM模式

在大项目中，Model负责从API或者网络上，数据库去获取原始数据，定义ViewModel去获取原始数据，并加以处理，还提供业务逻辑，在View上就直接使用ViewModel的方法获取数据，然后进行渲染。

下面是MVVM模式的一个实例

// ViewModel classes
let nextId = 0;

@Observed
export class ObservedArray<T> extends Array<T> {
   
  constructor(args: T[]) {
   
    console.log(`ObservedArray: ${
     JSON.stringify(args)} `)
    if (args instanceof Array) {
   
      super(...args);
    } else {
   
      super(args)
    }
  }
}

@Observed
export class Address {
   
  street: string;
  zip: number;
  city: string;

  constructor(street: string,
              zip: number,
              city: string) {
   
    this.street = street;
    this.zip = zip;
    this.city = city;
  }
}

@Observed
export class Person {
   
  id_: string;
  name: string;
  address: Address;
  phones: ObservedArray<string>;

  constructor(name: string,
              street: string,
              zip: number,
              city: string,
              phones: string[]) {
   
    this.id_ = `${
     nextId}`;
    nextId++;
    this.name = name;
    this.address = new Address(street, zip, city);
    this.phones = new ObservedArray<string>(phones);
  }
}

export class AddressBook {
   
  me: Person;
  contacts: ObservedArray<Person>;

  constructor(me: Person, contacts: Person[]) {
   
    this.me = me;
    this.contacts = new ObservedArray<Person>(contacts);
  }
}

// 渲染出Person对象的名称和Observed数组<string>中的第一个号码
// 为了更新电话