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
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
本次就暂时介绍这么多
谢谢各位的观看，有错误不足的地方， 本人乐于接受各位的意见