HarmonyOS NEXT鸿蒙开发：@State装饰器：组件内状态-优快云博客

介绍

官网指南

@State 装饰的变量，称为 状态变量，当状态变量改变时，就可以触发绑定UI组件的刷新，将新值渲染到 UI 上。

相当于 VUE、React 中，变量改变后，会自动渲染到页面上

组件内状态

@State 装饰的变量，是私有的，只能从组件内部访问

定义声明

在声明时必须指定类型和 初始化

类型

类型必须被指定，允许装饰的变量类型可以是下面类型：

Object
class
string
number
boolean
enum
以及上面类型的数组。
Date类型
API11及以上支持Map、Set类型。
支持undefined和null类型。
支持ArkUI框架定义的联合类型Length、ResourceStr、ResourceColor类型。

联合类型

支持上述支持类型的联合类型，比如：

@State count: number | undefined = 0;

undefined、null类型

当使用undefined和null的时候，建议显式指定类型，遵循TypeScript类型校验，比如：

@State a : string | undefined = undefined

是推荐的

不推荐：

@State a: string = undefined

例子

Text 控件绑定 message 状态变量
点击按钮，会改变 message 状态变量的值，同时会触发 Text 控件刷新，显示新值

@Entry
@Component
struct Example {
  @State message: string = 'Hello world'

  build() {
    Column() {
      Button('你好')
        .margin(10)
        .onClick(() => {
          this.message = '你好'
        })
      
      Text(this.message)
        .margin(10)
    }.width('100%')
  }
}