@State变量装饰器	说明
装饰器参数	无
同步类型	不与父组件中任何类型的变量同步。
允许装饰的变量类型	Object、class、string、number、boolean、enum类型，以及这些类型的数组。支持Date类型。支持类型的场景请参考观察变化。类型必须被指定。不支持any，不支持简单类型和复杂类型的联合类型，不允许使用undefined和null。说明：不支持Length、ResourceStr、ResourceColor类型，Length、ResourceStr、ResourceColor为简单类型和复杂类型的联合类型。
被装饰变量的初始值	必须本地初始化。

3，变量的传递/访问规则说明

传递/访问	说明
从父组件初始化	可选，从父组件初始化或者本地初始化。如果从父组件初始化将会覆盖本地初始化。支持父组件中常规变量（常规变量对@State赋值，只是数值的初始化，常规变量的变化不会触发UI刷新，只有状态变量才能触发UI刷新）、@State、@Link、@Prop、@Provide、@Consume、@ObjectLink、@StorageLink、@StorageProp、@LocalStorageLink和@LocalStorageProp装饰的变量，初始化子组件的@State。
用于初始化子组件	@State装饰的变量支持初始化子组件的常规变量、@State、@Link、@Prop、@Provide。
是否支持组件外访问	不支持，只能在组件内访问。

4，使用

①简单使用


@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            this.message = '修改后'
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

点击后

②当装饰的数据类型为class或者Object时，可以观察到自身的赋值的变化，和其属性赋值的变化

定义两个数据类：


export default class YuanZhen {
 
  public name: string = 'YuanZhen';
 
  public age: number = 18;
 
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}


import YuanZhen from './YuanZhen';
 
export default class Yuan {
 
  public number: number = 1;
  public yuanZhen: YuanZhen = new YuanZhen('yuanzhen', 18);
 
  constructor(number: number, yuanZhen: YuanZhen) {
    this.number = number
    this.yuanZhen = yuanZhen
  }
}

使用：


import Yuan from './bean/Yuan';
import YuanZhen from './bean/YuanZhen';
 
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State yuan:Yuan =new Yuan(1,new YuanZhen("yuanzhen",18))
 
  build() {
    Row() {
      Column() {
        Text("number:"+this.yuan.number+"\nName:"+this.yuan.yuanZhen.name+"\nAge:"+this.yuan.yuanZhen.age)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            this.yuan.number++
            this.yuan.yuanZhen.name="袁震"+this.yuan.number
            this.yuan.yuanZhen.age++
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

点击后继续点击

可以看到，对于嵌套属性，其值改变，同样可以观察的到

③当装饰的对象是array时，可以观察到数组本身的赋值和添加、删除、更新数组的变化

代码如下：


import YuanZhen from './bean/YuanZhen';
 
@Entry
@Component
struct Index {
  @State yuanArray:Array<YuanZhen> =new Array<YuanZhen>();
 
  aboutToAppear(){
    this.yuanArray.push(new YuanZhen("袁震",18))
  }
 
  build() {
    Row() {
      Column() {
        Text("数组长度："+this.yuanArray.length+"\n最后一个值："+this.yuanArray[this.yuanArray.length-1].age)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
 
          })
        Button("增加").onClick(()=>{
          this.yuanArray.push(new YuanZhen("袁震",18+this.yuanArray.length))
        })
        Button("删除").onClick(()=>{
          this.yuanArray.pop()
        })
        Button("赋值").onClick(()=>{
          this.yuanArray[this.yuanArray.length-1].age=100
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

点击增加时：

再点击增加

点击删除时：

点击赋值时没有反应，所以数组项中属性的赋值观察不到。

④多组件内部值的传递

如果有一个自定义组件：


import YuanZhen from './bean/YuanZhen'
 
@Component
export default struct YzComponent {
  @State yuanZhen:YuanZhen=new YuanZhen("袁震",18)
 
  build() {
    Row() {
      Column() {
        Text("name:"+this.yuanZhen.name+"\nage："+this.yuanZhen.age)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
 
      }
      .width('100%')
    }
    .height('100%')
  }
}

在使用时传入一个默认值：


import YuanZhen from './bean/YuanZhen';
import YzComponent from './YzComponent'
 
@Entry
@Component
struct Index {
  @State yuanZhen:YuanZhen =new YuanZhen("袁世震",22)
 
  build() {
    Column(){
      YzComponent({yuanZhen:this.yuanZhen})
    }
  }
}

运行效果：

对于@State来说，命名参数机制传递的值并不是必选的，如果没有命名参数传值，则使用本地初始化的默认值，有命名参数传递，就使用传递的值

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/256852