1 Star 0 Fork 5.3K

OpenHarmony-build / docs

forked from OpenHarmony / docs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
ts-application-states-storagelink-storageprop.md 2.60 KB
一键复制 编辑 原始数据 按行查看 历史
zengyawen 提交于 2021-11-10 20:02 . add arkui

AppStorage与组件同步

管理组件拥有的状态中,我们已经定义了如何将组件的状态变量与父组件或祖先组件中的**@State装饰的状态变量同步,主要包括@Prop**、@Link@Consume

本章节将定义如何将组件变量与AppStorage同步,主要提供**@StorageLink@StorageProp**装饰器。

@StorageLink装饰器

组件通过使用**@StorageLink(key)装饰的状态变量,将于AppStorage建立双向数据绑定,key为AppStorage中的属性键值。当创建包含@StorageLink的状态变量的组件时,该状态变量的值将使用AppStorage中的值进行初始化。在UI组件中对@StorageLink的状态变量所做的更改将同步到AppStorage**,并从AppStorage同步到任何其他绑定实例中,如PersistentStorage或其他绑定的UI组件。

@StorageProp装饰器

组件通过使用**@StorageProp(key)装饰的状态变量,将于AppStorage建立单向数据绑定,key标识AppStorage中的属性键值。当创建包含@StoageProp的状态变量的组件时,该状态变量的值将使用AppStorage**中的值进行初始化。AppStorage中的属性值更改会导致绑定的UI组件进行状态更新。

示例

let varA = AppStorage.Link('varA')
let envLang = AppStorage.Prop('languageCode')

@Entry
@Component
struct ComponentA {
  @StorageLink('varA') varA: number = 2
  @StorageProp('languageCode') lang: string = 'en'
  private label: string = 'count'

  private aboutToAppear() {
    this.label = (this.lang === 'zh') ? '数' : 'Count'
  }

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

      Button(`${this.label}: ${this.varA}`)
        .onClick(() => {
          AppStorage.Set<number>('varA', AppStorage.Get<number>('varA') + 1)
        })
      Button(`lang: ${this.lang}`)
        .onClick(() => {
          if (this.lang === 'zh') {
            AppStorage.Set<string>('languageCode', 'en')
          } else {
            AppStorage.Set<string>('languageCode', 'zh')
          }
          this.label = (this.lang === 'zh') ? '数' : 'Count'
        })
    }
  }
}

每次用户单击Count按钮时,this.varA变量值都会增加,此变量与AppStorage中的varA同步。每次用户单击当前语言按钮时,修改AppStorage中的languageCode,此修改会同步给this.lang变量。

1
https://gitee.com/openharmony-build/docs.git
git@gitee.com:openharmony-build/docs.git
openharmony-build
docs
docs
master

搜索帮助