#HarmonyOS NEXT体验官#HarmonyOS Next状态管理之页面级状态管理原创

一路向北545

发布于 2024-7-25 14:44

浏览

0收藏

@State、@Prop、@Link等装饰器的作用范围是组件之间。也就是他们只能在同一个@Entry修饰下的页面组件中的组件以及子组件进行数据的共享。当涉及到多个页面时，需要使用页面级的状态管理装饰器。

LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage支持UIAbility实例内多个页面间状态共享。

LocalStorage使用场景和相关的装饰器：@LocalStorageProp@LocalStorageLink。

具体操作步骤看代码：

一、如果希望LocalStorage在多个@Entry页面组件中共享，可以在所属UIAbility中创建LocalStorage实例，并调用windowStage.loadContent。

例如我们想将用户信息在各个页面进行共享。

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

//用户信息类
class UserInfo {
  userName: string = ''
  age: number = 0
  isLogin: boolean = false
}

export default class EntryAbility extends UIAbility {

  userInfo: Record<string, Object> = {
    'userName': '---',
    'age': 0,
    'isLogin': false
  };
  //创建LocalStorage实体，并将用户信息对象传入
  storage: LocalStorage = new LocalStorage(this.userInfo)

  onWindowStageCreate(windowStage: window.WindowStage): void {
    //加载登录页面，并将LocalStorage传入
    windowStage.loadContent('pages/LoginPage', this.storage);
  }

}

二、在页面组件中更新数据源并同步到LocalStorage

/**
 * 登录页
 */
import { router } from '@kit.ArkUI'

// 通过getShared接口获取stage共享的LocalStorage实例
let storage = LocalStorage.getShared()

@Entry(storage)
@Component
struct LoginPage {
  //通过@LocalStorageLink（双向数据同步）或@LocalStorageProp（单向数据同步）获取LocalStorage实例中存储的数据
  @LocalStorageLink("userName") userName: string = ''
  @LocalStorageLink("age") age: number = 0
  @LocalStorageLink("isLogin") isLogin: boolean = false

  build() {
    Column() {
      //展示用户信息
      Text(`用户：${this.userName}`).fontSize(30)
      Text(`年龄：${this.age}`).fontSize(30)
      //通过登录/退出操作，修改用户信息
      Button(this.isLogin ? "退出" : "登录").onClick(() => {
        if (this.isLogin) { //如果是登录状态，进行退出操作，用户信息会同步到LocalStorage实例中
          this.age = 0
          this.userName = '未登录'
          this.isLogin = false
        } else { //如果是未登录状态，进行登录操作，用户信息会同步到LocalStorage实例中
          this.age = 22
          this.userName = '张三'
          this.isLogin = true
        }
      }).backgroundColor(this.isLogin ? Color.Gray : Color.Blue)
      //跳转到另一个页面来验证不同页面组件是否共享了LocalStorage实例，以及同步了其中的数据。
      Button("跳转").onClick(() => {
        router.pushUrl({
          url: 'pages/SecondPage'
        })
      })

    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

三、在其他页面中获取LocalStorage数据源

import { router } from '@kit.ArkUI'

let storage = LocalStorage.getShared()

@Entry(storage)
@Component
struct SecondPage {
  @LocalStorageLink("userName") userName: string = ''
  @LocalStorageLink("age") age: number = 0
  @LocalStorageLink("isLogin") isLogin: boolean = false

  build() {
    Column() {
      if (this.isLogin) {

        Text(`用户：${this.userName}`).fontSize(30)
        Text(`年龄：${this.age}`).fontSize(30)

      } else {

        Text("还未登录，请先登录").fontSize(30)
        Button("返回").onClick(() => {
          router.back()
        })
        
      }

    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

#HarmonyOS NEXT体验官#HarmonyOS Next状态管理之页面级状态管理-鸿蒙开发者社区