HarmonyOS | 状态管理(七) | AppStorage(应用级UI状态存储)

系列文章目录

1.HarmonyOS | 状态管理(一) | @State装饰器
2.HarmonyOS | 状态管理(二) | @Prop装饰器
3.HarmonyOS | 状态管理(三) | @Link装饰器
4.HarmonyOS | 状态管理(四) | @Provide和@Consume装饰器
5.HarmonyOS | 状态管理(五) | @Observed装饰器和@ObjectLink装饰器
6.HarmonyOS | 状态管理(六) | LocalStorage(页面级UI状态存储)

---

---

前言

上一篇文章讲解了页面级状态存储，本篇文章我们来看看应用级状态存储。

---

一、AppStorage 是什么？

AppStorage是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。

二、AppStorage关联的两个装饰器

@StorageProp:@StorageProp(key) 和AppStorage中key对应的属性建立单向数据同步
@StorageLink:@StorageLink(key) 和AppStorage中key对应的属性建立双向数据同步

1.@StorageProp

AppStorage.SetOrCreate('Prop',60)

@Entry
@Component
struct StoragePropPage {
  @StorageProp('Prop') storagePropOne: number = 1;

  build() {
    Column({ space: 15 }) {
      // 点击后从60开始加1，只改变当前组件显示的storagePropOne，不会同步到AppStorage中
      Button(`Parent from AppStorage ${this.storagePropOne}`).onClick(() => this.storagePropOne += 1)
      ChildStorageProp()
    }
  }
}

@Component
struct ChildStorageProp {
  // @LocalStorageProp变量装饰器与LocalStorage中的'Prop'属性建立单向绑定
  @StorageProp('Prop') storagePropTwo: number = 2;

  build(){
    Column({ space: 15 }) {
      // 当StoragePropPage改变时，当前storagePropTwo不会改变，显示60
      Text(`Parent from AppStorage ${this.storagePropTwo}`)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.@StorageLink

AppStorage.SetOrCreate('PropA', 50)

@Entry
@Component
struct StorageLinkPage {
  @StorageLink('PropA') storageLink:number = 1

  build() {
    Column({ space: 20 }) {
      Text(`From AppStorage ${this.storageLink}`)
        .onClick(() => this.storageLink += 1)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

三、总结

1. AppStorage 是应用全局的UI状态存储。

2. @StorageProp(key) 和AppStorage中key对应的属性建立单向数据同步。

3. @StorageLink(key) 和AppStorage中key对应的属性建立双向数据同步。