鸿蒙：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

核心思路

将@ObservedV2@Trace修饰的类，通过PersistenceV2.connect绑定到具体的实例上。

只要修改这个实例的值，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())!;

觉得有用可以点赞或收藏