ArkTs之状态管理三

在我们的第一篇的内容中我们通过一张图表知道了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]

https://live.csdn.net/v/468669

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() })
    }
  }
}

从视频演示和代码中我们不难看出被LocalStorageLink修饰的变量可以双向的传递而LocalStorageProp只能单向的传递无法更改数据源，从其中我们也得知LocalStorage的基本用法，是可以跨页面进行数据的共享，不过需要传递一个key，需要我们new 出来

 

Harmony OS  NEXT   API12

本次就暂时介绍这么多

谢谢各位的观看，有错误不足的地方， 本人乐于接受各位的意见