HarmonyOS 被@ObservedV2和@Trace标记的类及字段，使用JSON.stringify之后字段名称都加上了“\_\_ob\_”开头的字段？

Question

使用JSON.stringify序列化之后字段名称都改变了，导致无法反序列化回来。

Answer 1

关于序列化后会有\_\_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;
  }
}