AtkTs之状态管理四 原创

在上一篇内容中我们了解了 LocalStorage的基本用法和一些基本的内容， 我们在第一篇内容中还看到了另外一个管理应用拥有的状态AppStorage，我们这一篇就来对它进行了解。
首先我们先介绍一下AppStorage： AppStorage是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。和AppStorage不同的是，LocalStorage是页面级的，通常应用于页面内的数据共享。而AppStorage是应用级的全局状态共享，还相当于整个应用的“中枢”。AppStorage可以和UI组件同步，且可以在应用业务逻辑中被访问。AppStorage支持应用的主线程内多个UIAbility实例间的状态共享，AppStorage中的属性可以被双向同步，数据可以是存在于本地或远程设备上，并具有不同的功能

先介绍了一下AppStorage的概念，接下来我们来说一下它的用法：
初始化： AppStorage.setOrCreate<T>(propName, newValue)
第一种:
使用API的方法， 例如:
AppStorage.get<T>(propName, newValue) 获取数据
AppStorage.set<T>(propName, newValue) 覆盖数据
第二种
使用UI的修饰符
@StorageProp(“value”) 单向传递参考Prop， 组件内可以改变
@StorageLink(“value”) 双向传递参考Link， 全局都可以改变
第一种方法的演示
[AppStorage1.mp4]
https://live.csdn.net/v/468904
import { router } from ‘@kit.ArkUI’

@Entry
@Component
struct AppStoragePage {

@State name: string = “老李”
@State age: string = “30”
storage() {
const info: Record<string, string> = {
“name”: “老李”,
“age”: “30”
}
AppStorage.setOrCreate<Record<string, string>>(“IDInfo”, info)
}
build() {
Column({ space: 12 }) {
Text(“我是页面一”)
Text(姓名: ${this.name})
Text(年龄: ${this.age})
Button(“点击跳转”)
.onClick(() => {
this.storage()
router.pushUrl({ url: “pages/AppStor/AppStoragePage2” })
})
}
}
}

import { router } from ‘@kit.ArkUI’

@Entry
@Component
struct AppStoragePage2 {

@State IDinfo: Record<string, string> = {}
aboutToAppear(): void {
const IDInfo = AppStorage.get<Record<string, string>>(“IDInfo”)
this.IDinfo = IDInfo!
}

build() {
Column({ space: 12 }) {
Text(“我是页面二”)
Text(姓名: ${this.IDinfo.name})
Text(年龄: ${this.IDinfo.age})
Button(“点击返回”)
.onClick(() => {
router.back()
})
}
}
}

第二种演示
[AppStorage2.mp4]
https://live.csdn.net/v/468905
import { router } from ‘@kit.ArkUI’

AppStorage.setOrCreate(“Name”, “老王”)
AppStorage.setOrCreate(“Age”, “31”)

@Entry
@Component
struct AppStoragePage {

@StorageLink(“Name”) name: string = “”
@StorageProp(“Age”) age: string = “”
aboutToAppear(): void {
this.name = AppStorage.get<string>(“Name”)!
this.age = AppStorage.get<string>(“Age”)!
}
build() {
Column({ space: 12 }) {
Text(“我是页面一”)
Text(姓名: ${this.name})
Button(“改名”)
.onClick(() => { this.name = “小王” })
Text(年龄: ${this.age})
Button(“修改年龄”)
.onClick(() => { this.age = “18” })
Button(“点击跳转”)
.onClick(() => {
router.pushUrl({ url: “pages/AppStor/AppStoragePage2” })
})
}
}
}

import { router } from ‘@kit.ArkUI’

@Entry
@Component
struct AppStoragePage2 {

@StorageLink(“Name”) name: string = “”
@StorageProp(“Age”) age: string = “”
aboutToAppear(): void {
this.name = AppStorage.get<string>(“Name”)!
this.age = AppStorage.get<string>(“Age”)!
}

build() {
Column({ space: 12 }) {
Text(“我是页面二”)
Text(姓名: ${this.name})
Button(“改名”)
.onClick(() => { this.name = “老王” })
Text(年龄: ${this.age})
Button(“修改年龄”)
.onClick(() => { this.age = “16” })
Button(“点击返回”)
.onClick(() => {
router.back()
})
}
}
}
通过上述两个示例我们可以了解到了AppStorage的基本用法

Harmony OS NEXT API12
本次就暂时介绍这么多
谢谢各位的观看，有错误不足的地方， 本人乐于接受各位的意见