HarmonyOS 状态管理装饰器 Observed与ObjectLink 处理嵌套对象/对象数组结构双向绑定

news2024/11/25 20:39:01

本文我们还是来说两个 harmonyos 状态管理的装饰器

@Observed与@ObjectLink
他们是用于嵌套对象或者以对象类型为数组元素的数据结构做双向同步的
之前我们说过的 state和link 都无法捕捉到这两种数据内部结构的变化

这里我们模拟一个类数据结构

class Person{
  name: string
  age: number
  gf: Person
  constructor(name: string, age: number,gf?: Person) {
    this.name = name;
    this.age = age;
    this.gf = gf;
  }
}

Person类三个字段 name字符串 age数字 gf字段又套一个Person类对象
然后我们构造器通过构造方法接到外面传的参数给我们类自己的属性赋值

然后我们组件这样写

@Entry
@Component
struct Dom {
  @State p: Person =new Person(
    '小猫猫',
    21,
    new Person('小小猫猫', 18)
  )
  build() {
    Row() {
      Column() {
        Text(this.p.gf.name)
        Button("修改").onClick(()=>{
          this.p.gf.name = "小狗狗";
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

这里我们声明一个叫 p的变量类型为我们上面定义的 Person 类类型然后new实例化一个Person 对象第一个参数字符串类型的小猫猫第二个参数数字类型的 21
然后第三个参数在new一个Person对象因为 gf 我们给的类型本来就是Person
第一个参数字符串类型值为小小猫猫第二个参数数字类型 18 这里我们不需要继续往下套了就第三个参数不传就好了

然后我们Text组件展示了这个 p对象下的gf字段下的 name字段
然后我们Button按钮的点击事件更改这个name 为小狗狗

运行之后我们 p.gf.name 的展示没问题
在这里插入图片描述
但是当我们点击按钮时大家会发现 Text中的内容并没有变成小狗狗依旧是小小猫猫

其实数据依旧变了但是我们用的是 State装饰它监听不到这么深的对象结构

这里我们可以用 Observed加ObjectLink解决
首先你要将需要用ObjectLink处理的类上面加上 Observed 装饰器

@Observed
class Person{
  name: string
  age: number
  gf: Person
  constructor(name: string, age: number,gf?: Person) {
    this.name = name;
    this.age = age;
    this.gf = gf;
  }
}

然后你要将需要被监听的元素加上 ObjectLink修饰

我们将组件代码改成这样

@Entry
@Component
struct Dom {
  @State p: Person =new Person(
    '小猫猫',
    21,
    new Person('小小猫猫', 18)
  )
  build() {
    Row() {
      Column() {
        Domismin({p: this.p.gf})
        Button("修改").onClick(()=>{
          this.p.gf.name = "小狗狗";
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
@Component
struct Domismin {
  @ObjectLink p: Person;
  build() {
    Text(this.p.name)
  }
}

这里我们多定义了一个 Domismin 组件
里面就一个Text组件用来展示传进来的p属性的name
然后我们外面组件将 p的gf字段传给Domismin 组件做p属性其实主要就是为了让 gf加上ObjectLink
因为在new时是加不了注解的所以要多弄一个组件来绑

此时我们点击内容就修改了
在这里插入图片描述

这样我们对象嵌套类型的就说完了

然后还有我们数组元素为对象的格式了
先定义一个这样的对象

class Person{
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

就是个普通对象两个字段 name 字符串类型 age 数字类型构造器接受两个参数然后给自己的属性赋值

然后组件中这样写

@Entry
@Component
struct Dom {
  @State p: Person[] = [
    new Person('小猫猫',21),
    new Person('小狗狗',12),
    new Person('小鲤鱼',13)
  ]
  build() {
    Row() {
      Column() {
        ForEach(
          this.p,
          (item,index)=>{
            Row(){
              Text(item.name)
              Button("修改").onClick(()=>{
                item.name = "我被修改了";
              })
            }
          }
        )
      }
      .width('100%')
    }
    .height('100%')
  }
}

我们先定义一个 p 字段 state修饰类型为数组其中所有元素类型为 Person
然后初始我们默认写了三条数据进去
然后用 ForEach 循环渲染元素
Text展示 Button点击触发修改当前循环这个元素的name属性
在这里插入图片描述
然后我们尝试点击小鲤鱼的修改按钮

会发现没有修改还是因为 state并检查不到这么深

然后还是老规矩只有被 Observed装饰的类实例化出来的对象才能装饰 ObjectLink

@Observed
class Person{
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

然后组件改成这样

@Entry
@Component
struct Dom {
  @State p: Person[] = [
    new Person('小猫猫',21),
    new Person('小狗狗',12),
    new Person('小鲤鱼',13)
  ]
  build() {
    Row() {
      Column() {
        ForEach(
          this.p,
          (item,index)=>{
            Row(){
              Domismin({p: item})
              Button("修改").onClick(()=>{
                item.name = "我被修改了";
              })
            }
          }
        )
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct Domismin {
  @ObjectLink p: Person;
  build() {
    Text(this.p.name)
  }
}