咨询@ObservedV2装饰器 HarmonyOS 鸿蒙Next

咨询@ObservedV2装饰器 HarmonyOS 鸿蒙Next 【设备信息】Mate60

【API版本】Api13

【DevEco Studio版本】5.0.7.200

【问题描述】

在查看@ObservedV2文档时，其中在概述中有提到:@ObservedV2的类实例目前不支持使用JSON.stringify进行序列化。请问，该如何理解这句话？是因为序列化的时候，属性名被自动加上了__ob_前缀吗？

我有个需求，一些用户信息，一方面需要序列化保存在本地，一方面希望信息变化后（比如token），需要重新调用一些接口。想通过ObservedV2和Monitor提供的能力，来实现，这个问题应该怎么解决？


更多关于咨询@ObservedV2装饰器 HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这里是被@ObservedV2标记的类及字段，使用JSON.stringify之后字段名称都加上“_ob”开头的字段，导致无法反序列化回来，关于序列化后会有__ob_前缀的问题，可以在序列前替换掉__ob_前缀，demo如下

import { plainToClass } from "class-transformer";
@ObservedV2
class Son {
  @Trace age: number = 100;
}
class Father {
  son: Son = new Son();
}

@Entry
@Component
struct Index {
  father: Father = new Father();
  aboutToAppear(): void {
    let a = JSON.stringify(this.father);
    let b: Father = plainToClass(Father,this.father);
    //{"son":{"__ob_age":100}}替换成{"son":{"age":100}}
    console.log(JSON.stringify(convertKeysToCamelCase(this.father)))
  }
  build() {
    Column() {
      // 当点击改变age时，Text组件会刷新
      Text(${this.father.son.age})
      .onClick(() => {
        this.father.son.age++;
      })
    }
  }
}

// utils.ets
export function underscoreToCamelCase(underscoreString:string):string {
  // 捕获`__ob_`替换成''
  return underscoreString.replace(/(_ob)/g, (match:string, letter:string):string=> {
    console.log(letter)
    return '';
  });
}
export function convertKeysToCamelCase(obj:ESObject):ESObject {
  if (obj && typeof obj === 'object') {
    const newObj:ESObject = {};
    Object.keys(obj).forEach((key) => {
      if (obj.hasOwnProperty(key)) {
        const newKey = underscoreToCamelCase(key);
        newObj[newKey] = convertKeysToCamelCase(obj[key]);
      }
    })
    return newObj;
  } else {
    return obj;
  }
}

更多关于咨询@ObservedV2装饰器 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


@ObservedV2装饰器是HarmonyOS鸿蒙Next中用于实现数据观察和响应式编程的机制。它主要用于标记类，使其成为可观察的数据源。当被@ObservedV2装饰的类中的属性发生变化时，依赖这些属性的UI组件会自动更新。

@ObservedV2装饰器通常与@Track或@Watch等装饰器配合使用，用于定义哪些属性或方法需要被追踪或监听。通过这种方式，开发者可以更高效地管理UI状态和数据流。

在鸿蒙Next中，@ObservedV2的使用示例如下：

@ObservedV2
class User {
  name: string = "John";
  age: number = 30;
}

@Entry
@Component
struct UserProfile {
  @State user: User = new User();

  build() {
    Column() {
      Text(`Name: ${this.user.name}`)
      Text(`Age: ${this.user.age}`)
      Button('Update Age')
        .onClick(() => {
          this.user.age += 1;
        })
    }
  }
}

在这个示例中，User类被@ObservedV2装饰，表示它是一个可观察的数据源。当user对象的age属性发生变化时，UI会自动更新显示新的年龄值。

@ObservedV2装饰器的引入简化了数据绑定和状态管理，使得开发者能够更专注于业务逻辑的实现。

回到顶部