HarmonyOS Next应用级状态管理

HarmonyOS Next数据持久化主要包括LocalStorage、AppStorage和PersistentStorage。LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。AppStorage是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。PersistentStorage是应用程序中的可选单例对象。此对象的作用是持久化存储选定的AppStorage属性，以确保这些属性在应用程序重新启动时的值与应用程序关闭时的值相同。

嘿哟，上面讲了一箩筐没啥用的东西 。总而言之，言而总之，这三个玩意儿在不一样的地界儿使用：

• LocalStorage：页面内数据共享（同一页面的各个组件间共享数据，存储在内存中）
• AppStorage：整个应用数据共享（存储在内存中）
• PersistentStorage：利用AppStorage实现持久化数据共享（应用关闭再启动数据状态不丢失，存储在磁盘中）

LocalStorage

import { router } from '@kit.ArkUI';

let para: Record<string, number> = { 'count': 0 };
let storage: LocalStorage = new LocalStorage(para);

// 子组件
@Component
struct SonComp {
  @LocalStorageLink('count') count: number = 0;

  build() {
    Column() {
      Text(`子组件：${this.count}`)
      Row({ space: 8 }) {
        Button('+1').onClick((event: ClickEvent) => {
          this.count += 1
        })
        Button('-1').onClick((event: ClickEvent) => {
          this.count -= 1
        })
      }

      GrandSonComp()
    }
    .backgroundColor(Color.Orange)
    .padding(12)
  }
}

// 孙组件
@Component
struct GrandSonComp {
  @LocalStorageProp('count') count: number = 0;

  build() {
    Column() {
      Text(`孙组件：${this.count}`)
      Row({ space: 8 }) {
        Button('+1').onClick((event: ClickEvent) => {
          this.count += 1
        })
        Button('-1').onClick((event: ClickEvent) => {
          this.count -= 1
        })
      }
    }
    .backgroundColor(Color.Pink)
    .padding(12)
  }
}

@Entry(storage)
@Component
struct Index {
  @LocalStorageLink('count') count: number = 0

  build() {
    Column({ space: 12 }) {
      Column() {
        Text(`父组件：${this.count}`)
        Row({ space: 8 }) {
          Button('+1').onClick((event: ClickEvent) => {
            this.count += 1
          })
          Button('-1').onClick((event: ClickEvent) => {
            this.count -= 1
          })
        }
      }
      SonComp()
    }
    .backgroundColor(Color.Grey)
    .width('100%')
  }
}

瞅瞅这效果，嘎嘎板正：

AppStorage

// 根页面：RootAppStoragePage，子页面1：AppStoragePage1，子页面2：AppStoragePage2
// RootAppStoragePage
import { router } from '@kit.ArkUI';

AppStorage.setOrCreate('count', 0)

@Entry
@Component
struct RootAppStoragePage {
  @StorageLink('count') count: number = 0;

  build() {
    Column({space:12}) {
      Text(`RootAppStoragePage：${this.count}`)
      Row({ space: 8 }) {
        Button('+1').onClick((event: ClickEvent) => {
          this.count += 1
        })
        Button('-1').onClick((event: ClickEvent) => {
          this.count -= 1
        })
      }

      Row({space:12}) {
        Button('AppStoragePage1').onClick((event: ClickEvent) => {
          router.pushUrl({ url: 'pages/appStorage/AppStoragePage1' })
        })
        Button('AppStoragePage2').onClick((event: ClickEvent) => {
          router.pushUrl({ url: 'pages/appStorage/AppStoragePage2' })
        })
      }
    }
    .backgroundColor(Color.Orange)
    .padding(12)
  }
}

// AppStoragePage1
@Entry
@Component
struct AppStoragePage1 {
  @StorageLink('count') count: number = 0;

  build() {
    Column() {
      Text(`AppStoragePage1：${this.count}`)
      Row({ space: 8 }) {
        Button('+1').onClick((event: ClickEvent) => {
          this.count += 1
        })
        Button('-1').onClick((event: ClickEvent) => {
          this.count -= 1
        })
      }
    }
    .backgroundColor(Color.Orange)
    .padding(12)
  }
}

// AppStoragePage2
@Entry
@Component
struct AppStoragePage2 {
  @StorageProp('count') count: number = 0;

  build() {
    Column() {
      Text(`AppStoragePage2：${this.count}`)
      Row({ space: 8 }) {
        Button('+1').onClick((event: ClickEvent) => {
          this.count += 1
        })
        Button('-1').onClick((event: ClickEvent) => {
          this.count -= 1
        })
      }
    }
    .backgroundColor(Color.Orange)
    .padding(12)
  }
}

不出意外，页面之间打通了：

PersistentStorage

PersistentStorage.persistProp('count', 0)

@Entry
@Component
struct PsPage1 {
  @StorageLink('count') count: number = 0;

  build() {
    Column() {
      Text(`PsPage1：${this.count}`)
      Row({ space: 8 }) {
        Button('+1').onClick((event: ClickEvent) => {
          this.count += 1
        })
        Button('-1').onClick((event: ClickEvent) => {
          this.count -= 1
        })
      }
    }
    .backgroundColor(Color.Orange)
    .padding(12)
  }
}

强扭的瓜不甜，这玩意可没法在预览器看效果，找个虚拟机你就看吧，保证一看一个不吱声：