鸿蒙应用状态管理

一、LocalStorage - 页面级状态管理

● 在当前页面中，所有组件都可以共享这个数据包
● 需要注意：我将 A 页面中的 LocalStorage 绑定在当前页面状态上，该页面中的所有组件都可以共享到绑定的页面数据包。

代码示例

• 创建一个页面， 页面中包含两个子组件。

/**
 * LocalStorage 页面级状态管理
 */
class Test {
  count: number = 0
}
// 创建共享数据包
let storage: LocalStorage = new LocalStorage(new Test())

@Entry(storage)
@Component
struct Index {
@LocalStorageLink("count") count: number = 0
  build() {
    Column({ space: 20 }) {
      Column() {
        Text("父组件")
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        Row() {
          Text("-")
            .onClick(() => {
              this.count--
            })
            .border({ width: 1, color: Color.Black})
            .fontSize(18)
            .padding(5)
          Text(this.count.toString())
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .margin(10)
          Text("+")
            .onClick(() => {
              this.count++
            })
            .border({ width: 1, color: Color.Black})
            .fontSize(18)
            .padding(5)
        }
      }
      // 子组件
      ChildLink()
      ChildProp()
    }
    .height('100%')
    .width('100%')
    .padding(20)
  }
}

@LocalStorageLink - 双向数据流

• 子组件 一

@Component
struct ChildLink {
  @LocalStorageLink("count") count: number = 0
  build() {
    Column() {
      Text("ChildLink")
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      Row(){
        Text("-")
          .fontSize(18)
          .border({ width: 1, color: Color.Black})
          .padding(5)
          .onClick(() => {
            this.count--
          })
        Text(this.count.toString())
          .margin(10)
        Text("+")
          .fontSize(18)
          .border({ width: 1, color: Color.Black})
          .padding(5)
          .onClick(() => {
            this.count++
          })
      }
    }
  }
}

@LocalStorageProp - 单向数据流

• 子组件二

@Component
struct ChildProp  {
  @LocalStorageProp("count") count: number = 0
  build() {
    Column() {
      Text("ChildProp")
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      Row(){
        Text("-")
          .fontSize(18)
          .border({ width: 1, color: Color.Black})
          .padding(5)
          .onClick(() => {
            this.count--
          })
        Text(this.count.toString())
          .margin(10)
        Text("+")
          .fontSize(18)
          .border({ width: 1, color: Color.Black})
          .padding(5)
          .onClick(() => {
            this.count++
          })
      }
    }
    .justifyContent(FlexAlign.Center)
  }
}

二、 AppStorage - 应用级状态管理（状态中枢）

• AppStorage 在全局状态管理和持久化的使用的时候都需要使用 AppStorage作为中枢一样处理。所以这个方法相对性、来说使用的非常常见。

代码示例

语法：
双向数据流： @StorageLink（‘字段名’）变量名 : 类型
单向数据流：@StorageProp（‘字段名’）变量名 : 类型

// 创建数据包， 该数据包创建后，可以放在 Ability中，窗口一加载，即可全局共享
AppStorage.setOrCreate("count", 1);


@Entry
@Component
struct PageOne {
  // 与AppStorege绑定(@StorageLink / @StorageProp )后面持久化状态存储也用这两个
  @StorageLink("count") count: number = 0  // 这里的字段名和AppStorage中的要保持一致
  @StorageProp("count") count: number = 0 
  build() {
    // 在多个页面内都可以使用
    Text(this.count.toString())
  }

三、PersistentStorage - 持久化状态存储

• • LocalStorage和AppStorage都是运行时的内存，当内存释放，状态就消失了，但是在应用退出再次启动后，希望依然能保存选定的结果，是应用开发中十分常见的现象，这就需要用到PersistentStorage。

代码示例

// 创建持久化状态， 并初始化数据
PersistentStorage.persistProp('message', " Huawei 2035 ");
@Entry
@Component
struct Index {
  // 需要注意的是：PersistentStorage中的数据需要通过AppStorage进行操作。所以这里一般使用@StorageProp / @StorageLink
  @StorageLink('message') message: string= "HarmonyOS NEXT YYLX"

  build() {
    Row() {
      Column() {
        // 应用退出时会保存当前结果。重新启动后，会显示上一次的保存结果
        Text(`${this.message}`)
          .onClick(() => {
            this.message= "阿华加油..."
          })
      }
    }
  }
}

• 这样就可以保证，退出应用进入页面 UI 状态依旧保持在次，并且他也具备前面页面和应用级别的状态共享，按需使用即可。