HarmonyOS - 组件内部状态管理装饰器：Local

前言

在鸿蒙平台，采用的是声明式 UI 来描述页面内容。所以就需要状态管理装饰器来修饰变量，这样 UI 组件才能在数据变化的时候自动去更新内容。

在状态管理装饰器的 V2 版本中，组件内部的数据状态管理是通过 Local 来实现的。

Local

如果在我们的开发场景中，有一个数据仅在组件内部使用，无需与其他组件交互，那么我们就可以用 @Local 去修饰该变量。

假设我们需要开发一个直播页面中的，页面中有一个可以点赞的按钮，有一个可以显示点赞数的文本。由于点赞数量这个数据仅在当前页面使用，无需跟其他页面进行交互，那么我们就可以使用 @Local 来实现。

具体代码实现如下：

less 复制代码

@Entry
@ComponentV2
struct Index {
  @Local likeNum: number = 0;
  build() {
    Column() {
      Text(`点赞数：${this.likeNum}`)
      Button("点赞").onClick(() => {
        this.likeNum += 1
      })
    }
  }
}

效果图如下：

通过上述代码可以看出，它的使用方式还是比较简单的。但在使用的过程中，我们有一些事项还是需要注意一下的。

注意事项

第一点就是 @Local 修饰的变量，只能进行本地初始化，不能从外部传递。这是比较好理解的，因为它的作用就是进行组件内部的状态管理。如果允许进行外部传递，那就破坏了组件内部的这个条件，违反了该装饰器的设计原则。

它修饰的变量必须进行本地化，否则会编译报错。比如下面的代码：

less 复制代码

// 编译报错：Property 'likeNum' has no initializer and is not definitely assigned in the constructor. <ArkTSCheck>
@Local likeNum: number;

第二点需要注意的就是，如果它修饰的是 class 类型的变量，那么只能监测到对象赋值的变化，对于对象属性的变化是监测不到的。比如下面的代码：

less 复制代码

class Live {
  likeNum: number = 0

  constructor(likeNum: number) {
    this.likeNum = likeNum;
  }
}

@Entry
@ComponentV2
struct Index {
  @Local like: Live = new Live(0);
  build() {
    Column() {
      Text(this.like.likeNum.toString())
      Button("点赞").onClick(() => {
        this.like.likeNum += 1
      })
    }
  }
}

首先，我们声明了一个 Live 的类将点赞数当其属性。然后定义了一个 Live 类型的变量 like，用 @Local 修饰。最后将 Text 与 like的 likeNum 属性进行绑定。

当我们点击点赞按钮的时候，就会发现虽然我们在按钮的点击事件中将 like 的 likeNum 进行了 +1 操作，但 Text 的内容并没有进行更新。

这种情况的原因就是 @Local 如果修饰的是类的实例对象，那么只能监测到赋值变化，不能监测到属性变化。赋值变化如下面的示例代码：

javascript 复制代码

Button("点赞").onClick(() => {
  this.like = new Live(10)
})

这次，我们点击按钮可以发现，Text 组件的内容会变成 10。

与 @State 的对比

之前熟悉 HarmonyOS 的朋友应该知道 V1 版本的 @State，它是最基础的状态管理装饰器，起初的设计也是用于组件内的状态管理。但因为它修饰的变量可以从外部进行传入，破坏了它组件内的设计初衷。所以 V2 版本又推出了 @Local 装饰器，用来保证了组件内的设计原则。

总结

使用场景：组件内部的状态管理，不能与外部组件交互；
使用方式：必须本地初始化，否则编译报错；
限制：装饰的 class 类型的变量，只能检测到变量的赋值变化，变量的属性变化是无法检测的；