AtkTs之状态管理四

在上一篇内容中我们了解了 LocalStorage的基本用法和一些基本的内容， 我们在第一篇内容中还看到了另外一个管理应用拥有的状态AppStorage，我们这一篇就来对它进行了解。

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

 

先介绍了一下AppStorage的概念，接下来我们来说一下它的用法：

初始化： AppStorage.setOrCreate(propName, newValue)

第一种:

使用API的方法， 例如:

AppStorage.get(propName, newValue) 获取数据

AppStorage.set(propName, newValue) 覆盖数据

第二种

使用UI的修饰符

@StorageProp("value") 单向传递参考Prop， 组件内可以改变

@StorageLink("value") 双向传递参考Link， 全局都可以改变

第一种方法的演示

[AppStorage1.mp4] 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] 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

本次就暂时介绍这么多

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