HarmonyOS状态管理 @Local装饰器:组件内部状态

449 阅读1分钟

“本文正在参加华为鸿蒙有奖征文征文活动”

  • 被@Local装饰的变量无法从外部初始化,因此必须在组件内部进行初始化
  • 当被@Local装饰的变量变化时,会刷新使用该变量的组件
  • @Local和@State差不多,但是@Local不能从外部初始化,而@State可以
  • 当装饰的变量类型为类对象时,仅可以观察到对类对象整体赋值的变化,无法直接观察到对类成员属性赋值的变化,对类成员属性的观察依赖@ObservedV2和@Trace装饰器。注意,@Local无法和@Observed装饰的类实例对象混用。

示例如下

class RawObject {
  name: string = ''

  constructor(name: string) {
    this.name = name
  }
}

@ObservedV2
class ObservedObject {
  @Trace name: string = ''

  constructor(name: string) {
    this.name = name
  }
}
@Builder
function LocalCompBuilder() {
  LocalComp()
}
@Preview
@ComponentV2
struct LocalComp {
  pathStack = new NavPathStack()
  @Local count: number = 0
  // 当装饰的变量类型为类对象时,仅可以观察到对类对象整体赋值的变化,无法直接观察到对类成员属性赋值的变化,对类成员属性的观察依赖@ObservedV2和@Trace装饰器。注意,@Local无法和@Observed装饰的类实例对象混用。
  @Local local1 = new RawObject('小明')
  @Local local2 = new ObservedObject('小红')

  aboutToAppear(): void {
    let navigationInfo = this.queryNavigationInfo() as NavigationInfo
    this.pathStack = navigationInfo.pathStack
  }

  build() {
    NavDestination() {
      Column({space:5}) {
        Text(`count++${this.count}`)

        Text(`local1++${this.local1.name}`)
        Text(`loacal2++${this.local2.name}`)
        Button("修改 count").onClick(() => {
          this.count++
        })
        Button("change object").onClick(() => {
          // 对类对象整体的修改均能观察到
          this.local1 = new RawObject('小猪')
          this.local2 = new ObservedObject('小猴')
        })
        Button("change name").onClick(() => {
          // @Local不具备观察类对象属性的能力,因此对rawObject.name的修改无法观察到
          this.local1.name = '修改name'
          // 由于ObservedObject的name属性被@Trace装饰,因此对observedObject.name的修改能被观察到
          this.local2.name = '修改name'
        })
      }

    }.title(this.pathStack.getParamByName(RouterConstants.LocalComp) + '')
  }
}