登录
HarmonyOS - 组件内部状态管理装饰器：Local
前言
在鸿蒙平台，采用的是声明式 UI 来描述页面内容。所以就需要状态管理装饰器来修饰变量，这样 UI 组件才能在数据变化的时候自动去更新内容。
在状态管理装饰器的 V2 版本中，组件内部的数据状态管理是通过 Local 来实现的。
Local
如果在我们的开发场景中，有一个数据仅在组件内部使用，无需与其他组件交互，那么我们就可以用 @Local 去修饰该变量。
假设我们需要开发一个直播页面中的，页面中有一个可以点赞的按钮，有一个可以显示点赞数的文本。由于点赞数量这个数据仅在当前页面使用，无需跟其他页面进行交互，那么我们就可以使用 @Local 来实现。
具体代码实现如下：
@Entry
@ComponentV2
struct Index {
@Local likeNum: number = 0;
build() {
Column() {
Text(`点赞数：${this.likeNum}`)
Button("点赞").onClick(() => {
this.likeNum += 1
})
}
}
}
效果图如下：
通过上述代码可以看出，它的使用方式还是比较简单的。但在使用的过程中，我们有一些事项还是需要注意一下的。
注意事项
第一点就是 @Local 修饰的变量，只能进行本地初始化，不能从外部传递。这是比较好理解的，因为它的作用就是进行组件内部的状态管理。如果允许进行外部传递，那就破坏了组件内部的这个条件，违反了该装饰器的设计原则。
它修饰的变量必须进行本地化，否则会编译报错。比如下面的代码：
// 编译报错：Property 'likeNum' has no initializer and is not definitely assigned in the constructor. <ArkTSCheck>
@Local likeNum: number;
第二点需要注意的就是，如果它修饰的是 class 类型的变量，那么只能监测到对象赋值的变化，对于对象属性的变化是监测不到的。比如下面的代码：
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 如果修饰的是类的实例对象，那么只能监测到赋值变化，不能监测到属性变化。赋值变化如下面的示例代码：
Button("点赞").onClick(() => {
this.like = new Live(10)
})
这次，我们点击按钮可以发现，Text 组件的内容会变成 10。
与 @State 的对比
之前熟悉 HarmonyOS 的朋友应该知道 V1 版本的 @State，它是最基础的状态管理装饰器，起初的设计也是用于组件内的状态管理。但因为它修饰的变量可以从外部进行传入，破坏了它组件内的设计初衷。所以 V2 版本又推出了 @Local 装饰器，用来保证了组件内的设计原则。
总结
- 使用场景：组件内部的状态管理，不能与外部组件交互；
- 使用方式：必须本地初始化，否则编译报错；
- 限制：装饰的 class 类型的变量，只能检测到变量的赋值变化，变量的属性变化是无法检测的；
