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] live.csdn.net/v/468669 const Data: Record<string, string> = { "name": "老李", "age": "30" } export const DataInfo = new LocalStorage(Data)

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

 

**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

本次就暂时介绍这么多

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