State 管理狀態(tài)

截屏2024-05-11 14.22.54.png

1. 支持string number 類型的狀態(tài)管理

@Entry
@Component

struct StatePage {
  @State name: string = '馬云'
  @State age: number = 55

  build() {
    Column({space: 20}){

      Text(`姓名: ${this.name} _年齡:  ${this.age}`)
        .fontSize(30)
        .onClick((e)=> {
          this.age++
        })

    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2 支持class 類型的狀態(tài)管理, class的實(shí)例對象的屬性發(fā)生變化, 頁面也會發(fā)生變化

class Person {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

@Entry
@Component

struct StatePage2 {
  @State p: Person = new Person('馬云', 77)

  build() {
    Column({space: 20}){

      Text(`姓名: ${this.p.name} _年齡:  ${this.p.age}`)
        .fontSize(30)
        .onClick((e)=> {
          this.p.age++
        })

    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

注意: 對class嵌套的class實(shí)例對象的屬性無法用State 做管理狀態(tài)

這種情況, this.p.friend.age的值變化, 頁面不會跟隨變化
friend?: Person 表示傳入的參數(shù)可選 (可傳可不傳)

class Person {
  name: string
  age: number
  friend: Person

  constructor(name: string, age: number, friend?: Person) {
    this.name = name
    this.age = age
    this.friend = friend
  }
}

@Entry
@Component

struct StatePage2 {
  @State p: Person = new Person('馬云', 77, new Person('劉強(qiáng)東',52, null))

  build() {
    Column({space: 20}){

      Text(`姓名: ${this.p.friend.name} _年齡:  ${this.p.friend.age}`)
        .fontSize(30)
        .onClick((e)=> {
          this.p.friend.age++
        })

    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

數(shù)組使用狀態(tài)管理時(shí), 刪除元素,添加元素都會觸發(fā), 修改數(shù)組中某個(gè)對象的某個(gè)屬性, 不會觸發(fā)

@prop和@Link

截屏2024-05-15 11.49.03.png

@Provide和@Comsume

爺爺組件和孫子組件之間的數(shù)據(jù)傳遞
爺爺寫@Provide

@Provide totalTask: number

孫子寫@Comsume

@Comsume totalTask: number

totalTask屬性數(shù)據(jù)就會自動進(jìn)行傳遞

@Observed和@ObjectLink 需要配合使用

截屏2024-07-03 11.41.42.png

@Observed  //修飾對象作為嵌套對象時(shí),修改對象屬性, 能夠觸發(fā)數(shù)據(jù)同步
class Person {
  name: string
  age: number
  gf: Person
  constructor(name: string,age: number, gf?: Person) {
    this.name = name
    this.age = age
    this.gf = gf
  }
}

@Entry
@Component

struct ObservedAndObjectLink {
  @State dava: Person = new Person("davai",18,new Person("luxi", 18))

  build() {
    Column({space: 20}){

      // Child(this.dava)
      Text( `name: ${this.dava.name} age: ${this.dava.age}`)
        .fontSize(30)
        .onClick(e => {
            this.dava.age++;
        })

        Child({p: this.dava.gf})

    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)

  }
}

@Component
struct Child {
  @ObjectLink p: Person   //申明對象需要進(jìn)行雙向數(shù)據(jù)綁定
  build(){

    Text( `name: ${this.p.name} age: ${this.p.age}`)
      .fontSize(30)
      .onClick(e => {
        this.p.age++;
      })
  }
}

函數(shù)作為參數(shù)傳遞

傳遞時(shí), 如果函數(shù)中需要訪問當(dāng)前方法中的this, 則需要在參數(shù)傳遞時(shí)進(jìn)行bind 操作

例如下面 Child({changeFinishTask: this.resetfinishTask.bind(this)}), 這樣方法中的this才能訪問到tasks, totalTask 等屬性

@Component
struct TaskList {

 @Link tasks: Task[]
  @Link totalTask: number
  @Link finishTask: number
  build() {
    Child({changeFinishTask: this.resetfinishTask.bind(this)})
}

resetfinishTask() {
    this.finishTask = this.tasks.filter(item => item.finish).length
  }
}

@Component
struct Child {
  changeFinishTask: () => void
  build(){}
}