ArkTs之状态管理三

Bension-LZ

917人浏览 · 2025-03-13 15:14:46

Bension-LZ · 2025-03-13 15:14:46 发布

在我们的第一篇的内容中我们通过一张图表知道了ArkTs中状态管理V1中的内容。

我们在上两篇幅内容中我们了解了基础的管理组件拥有的状态，从这一篇幅中我们开始了解管理应用拥有的状态。

在ArkTs中为我们提供了好几种状态用来帮助我们管理我们的全局数据

LocalStorage-页面级UI状态存储,

AppStorage- 应用全局的UI状态存储

PersistentStorage-持久化存储UI状态

LocalStorage: 通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage支持UIAbility实例内多个页面间状态共享。

用法: 创建LocalStorage实例如: const Storage = new LocalStorage(key)

单向@LocalStorageProp("key")

双向@LocalStorageLink("key")

步骤:

准备一个含有类型声明的对象作为共享数据

将数据传入刚刚new 的 LocalStorage中可以得到共享的对象

导入共享对象，在需要使用的页面导入该对象，并且传入@Entry中

声明一个变量，用@LocalStorageProp或者@LocalStorageLink修饰进行接收

使用声明的变量进行渲染

因为LocalStorage是一个类，所以我们要将它new出来，和它有关的还有两个修饰器分别是@LocalStorageProp和@LocalStorageLink。大家看到这个名字结尾想必已经非常眼熟了吧，如同它的名字结尾一样@LocalStorageProp是单向的传输接收，而@LocalStorageLink是双向的传输接收。我们给new 的LocalStorage(key)输入一个key让@LocalStorageProp或者@LocalStorageLink知道是哪一个对象

[LocalStorage1.mp4]

LocalStorage1

typescript
const Data: Record<string, string> = {
"name": "老李",
"age": "30"
}
export const DataInfo = new LocalStorage(Data)

typescript
import { DataInfo } from '../../model/LocalData'
import { router } from '@kit.ArkUI'

// 1. 传递给页面
@Entry(DataInfo)
@Component
struct LocalStoragePage {
// 2. 使用DataInfo
@LocalStorageLink("name")
name: string = ""
@LocalStorageProp("age")
age: string = ""
build() {
    Column() {
      Text("姓名")
      Text(this.name)
      Button("修改")
        .onClick(() => {
          this.name = "小李"
        })
      Text("年龄")
      Text(this.age)
      Row() {
        Button("修改")
          .onClick(() => {
            this.age = "32"
          })
        Button("退回")
          .onClick(() => {
            this.age = "30"
          })
      }
      Button("页面跳转")
        .onClick(() => {
          router.pushUrl({
            url: "pages/memory/LocalStoragePage2"
          })
        })
    }
}
}

typescript
import { DataInfo } from '../../model/LocalData';
import { router } from '@kit.ArkUI';

// 1. 传递给页面
@Entry(DataInfo)
@Component
struct LocalStoragePage2 {
// 2. 使用DataInfo
@LocalStorageLink("name")
name: string = ""
@LocalStorageProp("age")
age: string = ""

build() {
    Column() {
      Text("姓名")
      Text(this.name)
      Button("修改")
        .onClick(() => {
          this.name = "老李"
        })
      Text("年龄")
      Text(this.age)
      Row() {
        Button("修改")
          .onClick(() => {
            this.age = "32"
          })
      }
      Button("页面返回")
        .onClick(() => { router.back() })
    }
}
}