鸿蒙:PersistenceV2页面间持久化存储数据

前言

PersistenceV2是V2状态管理,本博客展示.connect方法存储数据,用于页面间的持久化数据共享,需要配合使用@ObservedV2@Trace使用。

参考文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-new-persistencev2https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-new-persistencev2

核心思路

  1. 将@ObservedV2@Trace修饰的类,通过PersistenceV2.connect绑定到具体的实例上。
  2. 只要修改这个实例的值,UI会更新,持久化也会更新。

运行效果

任一页面点击姓名或年龄,即可全部页面都修改

并且重新运行,依然和最后一次的数据一样,保持不变。

完整代码

1、Index01.ets

复制代码
import { student, Student, student02, student03 } from './StudentClass';


@Entry
@ComponentV2
struct Index01 {
  @Builder
  studentBuilder(title: string, student: Student) {
    Column({ space: 10 }) {
      Text(title)
      Column({ space: 20 }) {
        Button(student.name)
          .fontColor(Color.White)

          .fontSize(30)
          .onClick(() => {
            const name = ["老王", "张三", "王五", "赵六", "小王", "小张",]
            student.name = name[Math.floor(Math.random() * name.length)]

          })
        Button(student.age?.toString())
          .fontSize(30)
          .fontColor(Color.White)
          .onClick(() => {
            student.age = student.age! + 1
          })
      }
      .padding(20)
      .width("100%")

      .backgroundColor(Color.Black)
    }
  }

  build() {
    Column({ space: 20 }) {
      Text("PersistenceV2 使用示例")
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .padding({ bottom: 60 })
      Button(" 01点击跳转到下一页 ")
        .onClick(() => {
          this.getUIContext().getRouter().pushUrl({ url: "pages/Index02" })
        })
      this.studentBuilder("学生一", student,)
      this.studentBuilder("学生一", student02,)
      this.studentBuilder("学生一", student03,)


    }
    .justifyContent(FlexAlign.Center)
    .height("100%")
    .width("100%")
  }
}

2、Indext02.ets

复制代码
import { student, Student, student02, student03 } from './StudentClass';


@Entry
@ComponentV2
struct Index02 {
  @Builder
  studentBuilder(title: string, student: Student) {
    Column({ space: 10 }) {
      Text(title)
      Column({ space: 20 }) {
        Button(student.name)
          .fontColor(Color.White)

          .fontSize(30)
          .onClick(() => {
            const name = ["老王", "张三", "王五", "赵六", "小王", "小张",]
            student.name = name[Math.floor(Math.random() * name.length)]

          })
        Button(student.age?.toString())
          .fontSize(30)
          .fontColor(Color.White)
          .onClick(() => {
            student.age = student.age! + 1
          })
      }
      .padding(20)
      .width("100%")

      .backgroundColor(Color.Black)
    }
  }

  build() {
    Column({ space: 20 }) {
      Button(" 02 ")
        .onClick(() => {
          this.getUIContext().getRouter().pushUrl({ url: "pages/Index03" })
        })
      this.studentBuilder("学生一", student,)
      this.studentBuilder("学生一", student02,)
      this.studentBuilder("学生一", student03,)


    }
    .justifyContent(FlexAlign.Center)
    .height("100%")
    .width("100%")
  }
}

3、Index03.ets

复制代码
import { student, Student, student02, student03 } from './StudentClass';


@Entry
@ComponentV2
struct Index03 {
  @Builder
  studentBuilder(title: string, student: Student) {
    Column({ space: 10 }) {
      Text(title)
      Column({ space: 20 }) {
        Button(student.name)
          .fontColor(Color.White)

          .fontSize(30)
          .onClick(() => {
            const name = ["老王", "张三", "王五", "赵六", "小王", "小张",]
            student.name = name[Math.floor(Math.random() * name.length)]

          })
        Button(student.age?.toString())
          .fontSize(30)
          .fontColor(Color.White)
          .onClick(() => {
            student.age = student.age! + 1
          })
      }
      .padding(20)
      .width("100%")

      .backgroundColor(Color.Black)
    }
  }

  build() {
    Column({ space: 20 }) {
      Button(" 03 ")
        .onClick(() => {
          this.getUIContext().getRouter().pushUrl({ url: "pages/Index04" })
        })
      this.studentBuilder("学生一", student,)
      this.studentBuilder("学生一", student02,)
      this.studentBuilder("学生一", student03,)


    }
    .justifyContent(FlexAlign.Center)
    .height("100%")
    .width("100%")
  }
}

4、StudentClass.ets

复制代码
import { PersistenceV2 } from "@kit.ArkUI";

@ObservedV2
export class Student {
  @Trace
  name?: string;
  @Trace
  age?: number;

  constructor() {
    this.name = "李华";
    this.age = 21;
  }
}

export const student: Student = PersistenceV2.connect(Student, "student01", () => new Student())!;

export const student02: Student = PersistenceV2.connect(Student, "student02", () => new Student())!;

export const student03: Student = PersistenceV2.connect(Student, "student03", () => new Student())!;

觉得有用可以点赞或收藏

相关推荐
yenggd4 小时前
QoS之拥塞管理两种配置方法
网络·华为
一尘之中9 小时前
操作系统内核架构深度解析:从单内核、微内核到鸿蒙分布式设计
架构·harmonyos·ai写作
咕噜企业签名分发-淼淼15 小时前
App防止恶意截屏功能的方法:iOS、Android和鸿蒙系统的实现方案
android·ios·harmonyos
安卓开发者15 小时前
鸿蒙NEXT NearLink Kit入门指南:重新定义短距无线通信
华为·harmonyos
科技风向标19 小时前
2025 随身 WiFi 行业报告:格行 WiFi6 技术下放百元市场,中兴华为机型竞争力分析;五款机型芯片方案 / 网速 / 质保深度横评
网络·科技·物联网·华为·随身wifi·格行
想不明白的过度思考者1 天前
鸿蒙系统:不止于“手机OS”的全场景智能操作系统
华为·智能手机·harmonyos
IT WorryFree1 天前
华为光模块命名规则
华为
搬砖的小码农_Sky2 天前
如何将安卓应用迁移到鸿蒙?
android·华为·harmonyos
搬砖的小码农_Sky2 天前
鸿蒙应用开发和安卓应用开发的区别
android·华为·harmonyos