鸿蒙-状态管理V2其他方法

文章目录

前言

除了之前介绍的状态管理装饰器，在 V2 中还有其他新增的方法。

makeObserved

开发过程中我们经常会用到从服务器获取到数据(一般是 json 字符串)，转化为对象，然后设置到 UI 中做展示。但有一点比较麻烦：比如我们使用 rcp做网络请求，对返回对象调用toJson() as xxx转为对象，但这样获取到的对象是没办法被观察的，因为这样创建出来的对象不会被添加代理，这时候我们就可以使用UIUtils.makeObserved(xxx)来让改对象变为可观测的。

比如：

定义两个数据类

TypeScript 复制代码

@ObservedV2
class Person {
  @Trace name: string = ''
  @Trace age: number = 0
  @Trace static staticProp:string = ''
  @Trace address: Address = new Address()
}

@ObservedV2
class Address {
  @Trace zipCode: string = '000000'
  @Trace city: string = '北京'
}

然后我们从 json 字符串中反序列化出来对象。

TypeScript 复制代码

aboutToAppear(): void {
  @Local jsonPerson: Person | undefined = undefined
  let personJSON: string = `
  {
  "name": "huangyuan",
  "age": 19,
  "address": {
      "zipCode": "111111",
      "city": "shangdong"
    }
  }
  `
  let tmp = JSON.parse(personJSON) as Person
  this.jsonPerson = UIUtils.makeObserved(tmp)
}

这样this.jsonPerson就是可以被观测到的对象了。当我们修改该对象的属性，对应的 UI 也可以刷新了

getTarget

在状态管理中V1中，会给@Observed装饰的类对象以及使用状态变量装饰器如@State装饰的Class、Date、Map、Set、Array添加一层代理用于观测一层属性或API调用产生的变化。
在状态管理V2中，会给使用状态变量装饰器如@Trace、@Local装饰的Date、Map、Set、Array添加一层代理用于观测API调用产生的变化。

我们可以使用UIUtils.getTarget(xxx)来获取到代理对象的原始对象。但是当我们更改getTarget获取的原始对象中的内容不会被观察到变化，也不会触发UI刷新

@ObservedV2的类实例不支持JSON.stringify序列化

这个主要是针对使用new操作符创建且被@ObservedV2装饰的对象。即便是使用UIUtils.getTarget方法来获取原始对象，也不会对V2装饰器生成的前缀进行处理:

状态管理V2装饰器会为装饰的变量生成getter和setter方法，同时为原有变量名添加"ob "的前缀。出于性能考虑，getTarget接口不会对V2装饰器生成的前缀进行处理，因此向getTarget接口传入@ObservedV2装饰的类对象实例时，返回的对象依旧为对象本身，且被@Trace装饰的属性名仍有"ob"前缀。

来看个例子：

还是上面定义的两个数据类，被@ObservedV2修饰。

再来创建两个实例对象，一个还是和上面一样从json字符串中反序列化，另外一个使用new操作符创建。

然后我们输出一下使用JSON.stringify序列化之后的字符串

TypeScript 复制代码

Button('makeObserved 转为json').onClick((_)=>{
  hilog.error(0x01,'StateManagerV2Page',`toJSON: ${JSON.stringify(this.jsonPerson)}`)
})
Button('new对象 转为json').onClick((_)=>{
  hilog.error(0x01,'StateManagerV2Page',`toJSON: ${JSON.stringify(this.person)}`)
})
Button('new对象 getTarget 转为json').onClick((_)=>{
  hilog.error(0x01,'StateManagerV2Page',`toJSON: ${JSON.stringify(UIUtils.getTarget(this.person))}`)
})

当我们一次点击这三个按钮后，控制台输出

toJSON: {"name":"huangyuan","age":19,"address":{"zipCode":"111111","city":"shangdong"}}

toJSON: {"__ob_name":"xuan","__ob_age":18,"__ob_address":{"__ob_zipCode":"000000","__ob_city":"北京"}}

toJSON: {"__ob_name":"xuan","__ob_age":18,"__ob_address":{"__ob_zipCode":"000000","__ob_city":"北京"}}

可以看到，使用new操作符创建的ObservedV2对象属性都添加了__ob_前缀,而通过json 字符串反序列化之后再使用UIUtils.makeObserved方法添加代理之后的对象并没有添加__ob_前缀。

双向绑定

在状态管理 V2 中，更倾向于单向数据流，所有可同步数据的修改都有父控件来处理，然后同步到子组件。子组件想要修改数据时，需要调用用@Event修饰的回调方法。写起来略显繁琐，这里因此提供了!!双向绑定语法糖。

在使用时，子组件中@Event方法名需要声明为"$"+ @Param属性名，这里还有一些需要注意的地方

如果父组件使用了!!双向绑定语法，则表明父组件的变化会同步给子组件，子组件的变化也会同步给父组件。

如果父组件没有使用!!，则父组件发生的变化是单向的。

TypeScript 复制代码

@Local count: number = 4
build() {
  Star({count:this.count!!}) //注意这里，在参数的末尾加了双叹号
}

@ComponentV2
struct Star{

  @Param @Require count:number
  @Event $count:(val:number) => void

  build() {
    Column(){
      Text(`value ${this.count}`)
      Button('改变value').onClick((_)=>{
        this.$count(this.count +1)
      })
    }
  }
}

当我们点击Star中的改变value按钮时，组件中count值也会跟着改变。这个双向绑定的语法糖可以粗暴的理解为

TypeScript 复制代码

Star({ value: this.value, $value: (val: number) => { this.value = val }})

如果是较为复杂的属性变化，还是使用原始的方案，不要使用语法糖了。