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

 

typescript
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

本次就暂时介绍这么多

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