鸿蒙: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())!;

觉得有用可以点赞或收藏

相关推荐
LucianaiB21 小时前
【成长纪实】从“Hello World”到分布式实战的进阶之路
harmonyos·鸿蒙·成长纪实
万添裁21 小时前
基于ArkAnalyzer的HarmonyOS通用API多端安全性分析工具
harmonyos·ark
无风听海21 小时前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
Bert丶seven1 天前
鸿蒙Harmony实战开发教学(No.8)-Hyperlink超链接组件基础到进阶篇
华为·harmonyos·arkts·arkui·1024程序员节·开发教程
JohnnyDeng941 天前
ArkTs-Android 与 ArkTS (HarmonyOS) 存储目录全面对比
android·harmonyos·arkts·1024程序员节
王嘉俊9251 天前
HarmonyOS 超级终端与服务卡片开发:打造无缝多设备交互体验
华为·架构·harmonyos·arkts·1024程序员节
俩毛豆1 天前
【图片】【编缉】图片增加水印(通过组件的Overlay方法增加水印)
前端·harmonyos
逻极1 天前
HarmonyOS 5 鸿蒙多设备适配与分布式开发指南
分布式·华为·harmonyos·鸿蒙
爱笑的眼睛112 天前
HarmonyOS Want意图传递机制深度解析
华为·harmonyos
爱笑的眼睛112 天前
HarmonyOS语音识别与合成:构建智能语音应用的深度指南
华为·harmonyos