狀態(tài)管理簡(jiǎn)介

ArkUI 開發(fā)提供了多維度的狀態(tài)管理機(jī)制。狀態(tài)管理機(jī)制能使父子組件之間，爺孫組件之間數(shù)值傳遞，還可以跨設(shè)備傳遞。從數(shù)據(jù)的傳遞形式看，可以分為只讀的單向傳遞和可變更的雙向傳遞。與vue的用法特別像。

@State修飾符

@State有以下特征:

1. 支持多種數(shù)據(jù)類型: class number boolean string 強(qiáng)類型的值和引用類型。允許強(qiáng)類型構(gòu)成的數(shù)組:Array< class >、Array< string >、Array< boolean >、Array< number >。不允許object和any
2. 內(nèi)部私有: 標(biāo)記為@State的屬性，表明當(dāng)前變量為私有變量，只能當(dāng)前組件內(nèi)訪問(wèn)。
3. 支持多個(gè)實(shí)例: 組件不同實(shí)例的內(nèi)部狀態(tài)數(shù)據(jù)獨(dú)立
4. 本地初始化: 必須為所有 @State 變量分配初始值

案例:

@Entry
@Component
export struct stateData{
  @State title:string = "迪加奧特曼"
  build(){
    Column(){
      Text(this.title).fontSize(36)
      Divider().margin({top:50,bottom:50})
      Button("修改標(biāo)題").onClick(()=>{
        this.title = "迪迦奧特曼他爹"
      })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

@Prop修飾符

@Prop與@State有相同語(yǔ)義，但是初始方式不同，用法也不同。@Prop用在父組件內(nèi)。父組件能改變子組件使用@Prop裝飾的數(shù)據(jù)。反觀，子組件的更改不影響父組件。
@Prop有以下特征:

1. 內(nèi)部私有: 標(biāo)記為@Prop的屬性，表明當(dāng)前變量為私有變量，只能當(dāng)前組件內(nèi)訪問(wèn)。
2. 支持簡(jiǎn)單數(shù)據(jù)類型: 支持number，string，boolean類型。
3. 支持多個(gè)實(shí)例: 組件不同實(shí)例的內(nèi)部狀態(tài)數(shù)據(jù)獨(dú)立。
4. 不支持內(nèi)部初始化: 在創(chuàng)建組件的新實(shí)例時(shí)，必須將值傳遞給 @Prop 修飾的變量進(jìn)行初始化，不支持在組件內(nèi)部進(jìn)行初始化。

案例:

@Entry
@Component
export struct propData{
  @State title:string = "迪加奧特曼"
  build(){
    Column(){
      childCpn({ childData:this.title })// 必須初始化子組件的childData字段

      Divider().margin({top:10,bottom:10})

      Text("父組件:"+this.title).fontSize(36)

      Divider().margin({top:50,bottom:50})
      Button("修改標(biāo)題").onClick(()=>{
        this.title = "迪迦奧特曼他爹"// 父組件的更改影響子組件
      })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

@Component
struct childCpn{
  @Prop childData:string; // 不允許本地初始化
  build(){
    Text(this.childData).fontSize(36).onClick(()=>{
      this.childData = "泰羅奧特曼" // 子組件的更改不影響父組件
    })

  }
}

@Link修飾符

@Link與@State有相同語(yǔ)義。@Link裝飾的變量能和父組件的@State裝飾的變量建立雙休的數(shù)據(jù)綁定。
@Link有以下特征:

1. 內(nèi)部私有: 標(biāo)記為@Link的屬性，表明當(dāng)前變量為私有變量，只能當(dāng)前組件內(nèi)訪問(wèn)。
2. 支持多種數(shù)據(jù)類型: 支持class，number，string，boolean或者這些類型的數(shù)據(jù)。
3. 支持多個(gè)實(shí)例: 組件不同實(shí)例的內(nèi)部狀態(tài)數(shù)據(jù)獨(dú)立。
4. 不支持內(nèi)部初始化: 在創(chuàng)建組件的新實(shí)例時(shí)，必須將值傳遞給 @Link 修飾的變量進(jìn)行初始化，不支持在組件內(nèi)部進(jìn)行初始化。初始化使用 $ 符號(hào)，例如：$data。

案例:

@Entry
@Component
export struct propData{
  @State title:string = "迪加奧特曼"
  build(){
    Column(){
      childCpn({ childData:$title })// 必須初始化子組件的childData字段

      Divider().margin({top:10,bottom:10})

      Text("父組件:"+this.title).fontSize(36)

      Divider().margin({top:50,bottom:50})
      Button("修改標(biāo)題").onClick(()=>{
        this.title = "迪迦奧特曼他爹"// 父組件的更改影響子組件
      })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

@Component
struct childCpn{
  @Link childData:string; // 不允許本地初始化
  build(){
    Text(this.childData).fontSize(36).onClick(()=>{
      this.childData = "泰羅奧特曼" // 子組件的更改不影響父組件
    })

  }
}

@StorageLink修飾符

@Link與@State有相同語(yǔ)義。@Link裝飾的變量能和父組件的@State裝飾的變量建立雙休的數(shù)據(jù)綁定。
@Link有以下特征:

1. 本地初始化: @StorageLink裝飾的變量分配初始值。
2. 支持多種數(shù)據(jù)類型: 支持與@State一樣的數(shù)據(jù)類型，同時(shí)支持object。
3. 數(shù)據(jù)狀態(tài)全局化: @StorageLink裝飾的數(shù)據(jù)變化后全局都會(huì)改變
4. 數(shù)據(jù)持久化: 通過(guò)搭配 PersistentStorage 接口實(shí)現(xiàn)數(shù)據(jù)持久化

綁定數(shù)據(jù)

@Entry
@Component
export struct storageLink{
  @StorageLink('date1') data:string = "第一個(gè)案例:綁定數(shù)據(jù)"
  build(){
    Column(){
      Text("隨機(jī)數(shù):"+this.data).fontSize(36)
      Divider().margin({top:50,bottom:50})
      Button("修改標(biāo)題").onClick(()=>{
        this.data = Math.random()+""
      })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

雙向綁定數(shù)據(jù)

@Entry
@Component
export struct storageLink{
  @StorageLink('date2') data:string = "第二個(gè)案例:雙向綁定數(shù)據(jù)"
  build(){
    Column(){
      Text("隨機(jī)數(shù):"+this.data).fontSize(36).fontColor(Color.Red).margin({bottom:10})
      CustomCpn()
      Divider().margin({top:50,bottom:50})
      Button("修改標(biāo)題").onClick(()=>{
        this.data = Math.random()+""
      })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

@Component
struct CustomCpn {
  @StorageLink('date2') time: string = "自定義組件";

  build() {
    Text(`子組件【${this.time}】`)
      .fontColor(Color.Blue)
      .fontSize(20)
      .onClick(() => {
        this.time = Math.random()+""
      })
  }
}

頁(yè)面間數(shù)據(jù)綁定
頁(yè)面一

import router from '@ohos.router';
@Entry
@Component
export struct storageLink{
  @StorageLink('date3') data:string = "第三個(gè)案例:頁(yè)面間數(shù)據(jù)綁定";//tips的值以'key'第一次出現(xiàn)的為準(zhǔn)
  build(){
    Column(){
      Text("隨機(jī)數(shù):"+this.data).fontSize(36).margin({bottom:20})
      CustomCpn()
      Divider().margin({top:50,bottom:50})
      Button("修改數(shù)據(jù)").onClick(()=>{
        this.data = Math.random()+""
      })
      Button('跨頁(yè)面數(shù)據(jù)綁定')
        .onClick(() => {
          router.pushUrl({url: "pages/home/arkTsIntro/stateManage/storageLink/demo3/Two"})// 打開第二個(gè)頁(yè)面
        })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

@Component
struct CustomCpn {
  @StorageLink('date3') time: string = "自定義組件";
  build() {
    Text(`子組件【${this.time}】`)
      .fontColor(Color.Blue)
      .fontSize(20)
      .onClick(() => {
        this.time = Math.random()+""
      })
  }
}

頁(yè)面二

@Entry
@Component
export struct storageLink2{
  @StorageLink('date3') data:string = "案例三，第二個(gè)頁(yè)面";//tips的值以'key'第一次出現(xiàn)的為準(zhǔn)
  build(){
    Column(){
      Text("隨機(jī)數(shù):"+this.data).fontSize(36)
      Divider().margin({top:50,bottom:50})
      Button("修改數(shù)據(jù)").onClick(()=>{
        this.data = Math.random()+""
      }).margin({bottom:20})
      Button("返回上一頁(yè)").onClick(()=>{
        router.back()
      })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

持久化數(shù)據(jù)

// 持久化存儲(chǔ)key并設(shè)置默認(rèn)值
PersistentStorage.PersistProp("date4", "持久化數(shù)據(jù)")
//持久化數(shù)據(jù)
@Entry
@Component
export struct storageLink{
  @StorageLink('date4') data:string = "第四個(gè)案例:持久化數(shù)據(jù)"
  build(){
    Column(){
      Text("隨機(jī)數(shù):"+this.data).fontSize(36)
      Divider().margin({top:50,bottom:50})
      Button("修改標(biāo)題").onClick(()=>{
        this.data = Math.random()+""
      }).margin({bottom:20})
      Button('跨頁(yè)面數(shù)據(jù)綁定')
        .onClick(() => {
          router.pushUrl({url: "pages/home/arkTsIntro/stateManage/storageLink/demo3/Two"})// 打開第二個(gè)頁(yè)面
        })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

@Watch修飾符

@Watch用于監(jiān)聽被Watch裝飾的變量值變化，當(dāng)他數(shù)值發(fā)生更改，會(huì)觸發(fā)相應(yīng)的方法(funcName)。

@Entry
@Component
export struct watchData{
  @State @Watch("funcName") num:number = 0
  @State title:string = "@Watch裝飾變量"

  funcName(){
    this.title = "我發(fā)生改變啦"+Math.random()*100;
  }
  build(){
    Column(){
      Text("標(biāo)題:"+this.title).fontSize(26).margin({bottom:10})
      Text("數(shù)值:"+this.num).fontSize(26)

      Divider().margin({top:50,bottom:50})
      Button("修改標(biāo)題").onClick(()=>{
       this.num++;
      })
    }.alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height("100%")
  }
}

注意:@Watch裝飾器只能監(jiān)聽 @State 、 @Prop 、 @Link 、 @ObjectLink 、 @Provide 、 @Consume 、 @StorageProp 以及 @StorageLink 裝飾的變量

?

?? $個(gè)人主頁(yè)：$ 沉默小管

?? $個(gè)人網(wǎng)站：$ 沉默小管

?? $個(gè)人導(dǎo)航網(wǎng)站：$ 沉默小管導(dǎo)航網(wǎng)

?? $我的開源項(xiàng)目：$ vueCms.cn

?? $技術(shù)交流QQ群：837051545$

??

??

??

如果有不懂可以留言，我看到了應(yīng)該會(huì)回復(fù)
如有錯(cuò)誤，請(qǐng)多多指教文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-831895.html

到了這里，關(guān)于【HarmonyOS】鴻蒙開發(fā)之狀態(tài)管理——第2.2章的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！