1、简介状态管理V2是鸿蒙开发中用于增强状态观测能力的新一代解决方案相比V1版本在深度观测、性能优化和设计规范性方面有显著提升。完整使用请参考官方文档状态管理V2本文最后将附上本案例的完整git代码结合代码浏览博客效果更佳。2、V2所属装饰器1Local必须本地初始化不允许外部传入初始化Local 的使用方法和V1版本的 State 类似但是由于 State 装饰器既能本地初始化又能够从外部初始化无法确保 State 装饰变量的初始值一定为组件内部定义的值因此在V2版本中推出 Local 装饰器表示组件的内部状态。使用限制Local装饰器只能在 ComponentV2 装饰的自定义组件中使用Local 装饰的变量表示组件内部状态不允许从外部传入初始化Local 与 State 的用法、功能对比如下StateLocal参数无。无。从父组件初始化可选。不允许外部初始化。观察能力能观测变量本身以及一层的成员属性无法深度观测。能观测变量本身深度观测依赖Trace装饰器。数据传递可以作为数据源和子组件中状态变量同步。可以作为数据源和子组件中状态变量同步。2ParamParam 表示组件从外部传入的状态使得父子组件之间的数据能够进行同步★★★Param 装饰的变量不允许在组件内部直接修改★★★原因Param 的设计目的是实现父→子的单向数据流。若子组件直接修改 Param 变量会导致父子状态不一致破坏单向性。ComponentV2 export struct Example { Param address: string 北京市 build() { Text(地址 this.address) .onClick(() { // Param 装饰的变量不允许在组件内部直接修改 // this.address 深圳市 // 错误写法 }) } }3Provider 和 ConsumerProvider 和 Consumer 用于实现跨组件层级的双向数据同步两者通过唯一的 aliasName 建立绑定关系类似于V1装饰器中的 Provide 和 Consume。Provider即数据提供方其所有的子组件都可以通过 Consumer 绑定相同的 key 来获取Provider 提供的数据。Consumer即数据消费方可以通过绑定同样的 key 获取其最近父节点的 Provider 的数据当查找不到 Provider 的数据时使用本地默认值。示例代码如下import { Example } from ../views/Example Entry ComponentV2 struct Index { Provider(num) count: number 0 build() { Column({ space: 15 }) { Button(父组件的值 this.count) .width(100%) .onClick(() this.count) // 子组件 Example() } .padding(10) .height(100%) .width(100%) } }ComponentV2 export struct Example { Consumer(num) count: number 0 build() { Button(子组件的值 this.count) .width(100%) .onClick(() this.count) } }效果如下4ObservedV2 和 TraceObservedV2 和 Trace 是V2所属装饰器中用于增强类对象属性观测能力的装饰器组合主要解决嵌套类属性变化的直接观测问题。ObservedV2 装饰器与 Trace 装饰器需要配合使用未被 Trace 装饰的属性用在UI中无法感知到变化。示例如下ObservedV2 export class Person { name: string 张三 Trace age: number 18 } ObservedV2 export class Profile { Trace person: Person new Person() } Entry ComponentV2 struct Index { Local personInfo: Profile new Profile() build() { Column({ space: 15 }) { Text(this.personInfo.person.name) Text(this.personInfo.person.age ) .onClick(() this.personInfo.person.age) } .height(100%) .width(100%) } }3、其他状态管理1AppStorageV2AppStorageV2 是提供状态变量在应用级全局共享的能力可以通过 connect 方法绑定同一个key进行跨 ability 的数据共享。使用限制仅支持 class 类型具体请参考官方文档AppStorageV2ObservedV2 export class AreaHeight { Trace topHeight: number 0 Trace bottomHeight: number 0 } // 创建数据 const areaHeight AppStorageV2.connect(AreaHeight, () new AreaHeight()) as AreaHeight areaHeight.topHeight uiContext.px2vp(top.height) areaHeight.bottomHeight uiContext.px2vp(bottom.height)ComponentV2 export struct Example { // 获取数据 areaHeight AppStorageV2.connect(AreaHeight)! build() { Column() { } .padding({ top: this.areaHeight.topHeight, bottom: this.areaHeight.bottomHeight }) } }2PersistenceV2PersistenceV2 提供状态变量持久化能力需要注意的是PersistenceV2 必须与 UI 实例关联持久化操作需在 UI 实例初始化完成后调用即 loadContent 回调触发后而且不能持久化存储数组类型。export class Keys { value: string name_key } PersistenceV2.connect(Keys, () new Keys())更多使用限制可参考官方文档PersistenceV2 使用限制本章完整示例代码可参考gitee地址V2状态管理示例代码
鸿蒙开发中V2状态管理的使用（上）
1、简介状态管理V2是鸿蒙开发中用于增强状态观测能力的新一代解决方案相比V1版本在深度观测、性能优化和设计规范性方面有显著提升。完整使用请参考官方文档状态管理V2本文最后将附上本案例的完整git代码结合代码浏览博客效果更佳。2、V2所属装饰器1Local必须本地初始化不允许外部传入初始化Local 的使用方法和V1版本的 State 类似但是由于 State 装饰器既能本地初始化又能够从外部初始化无法确保 State 装饰变量的初始值一定为组件内部定义的值因此在V2版本中推出 Local 装饰器表示组件的内部状态。使用限制Local装饰器只能在 ComponentV2 装饰的自定义组件中使用Local 装饰的变量表示组件内部状态不允许从外部传入初始化Local 与 State 的用法、功能对比如下StateLocal参数无。无。从父组件初始化可选。不允许外部初始化。观察能力能观测变量本身以及一层的成员属性无法深度观测。能观测变量本身深度观测依赖Trace装饰器。数据传递可以作为数据源和子组件中状态变量同步。可以作为数据源和子组件中状态变量同步。2ParamParam 表示组件从外部传入的状态使得父子组件之间的数据能够进行同步★★★Param 装饰的变量不允许在组件内部直接修改★★★原因Param 的设计目的是实现父→子的单向数据流。若子组件直接修改 Param 变量会导致父子状态不一致破坏单向性。ComponentV2 export struct Example { Param address: string 北京市 build() { Text(地址 this.address) .onClick(() { // Param 装饰的变量不允许在组件内部直接修改 // this.address 深圳市 // 错误写法 }) } }3Provider 和 ConsumerProvider 和 Consumer 用于实现跨组件层级的双向数据同步两者通过唯一的 aliasName 建立绑定关系类似于V1装饰器中的 Provide 和 Consume。Provider即数据提供方其所有的子组件都可以通过 Consumer 绑定相同的 key 来获取Provider 提供的数据。Consumer即数据消费方可以通过绑定同样的 key 获取其最近父节点的 Provider 的数据当查找不到 Provider 的数据时使用本地默认值。示例代码如下import { Example } from ../views/Example Entry ComponentV2 struct Index { Provider(num) count: number 0 build() { Column({ space: 15 }) { Button(父组件的值 this.count) .width(100%) .onClick(() this.count) // 子组件 Example() } .padding(10) .height(100%) .width(100%) } }ComponentV2 export struct Example { Consumer(num) count: number 0 build() { Button(子组件的值 this.count) .width(100%) .onClick(() this.count) } }效果如下4ObservedV2 和 TraceObservedV2 和 Trace 是V2所属装饰器中用于增强类对象属性观测能力的装饰器组合主要解决嵌套类属性变化的直接观测问题。ObservedV2 装饰器与 Trace 装饰器需要配合使用未被 Trace 装饰的属性用在UI中无法感知到变化。示例如下ObservedV2 export class Person { name: string 张三 Trace age: number 18 } ObservedV2 export class Profile { Trace person: Person new Person() } Entry ComponentV2 struct Index { Local personInfo: Profile new Profile() build() { Column({ space: 15 }) { Text(this.personInfo.person.name) Text(this.personInfo.person.age ) .onClick(() this.personInfo.person.age) } .height(100%) .width(100%) } }3、其他状态管理1AppStorageV2AppStorageV2 是提供状态变量在应用级全局共享的能力可以通过 connect 方法绑定同一个key进行跨 ability 的数据共享。使用限制仅支持 class 类型具体请参考官方文档AppStorageV2ObservedV2 export class AreaHeight { Trace topHeight: number 0 Trace bottomHeight: number 0 } // 创建数据 const areaHeight AppStorageV2.connect(AreaHeight, () new AreaHeight()) as AreaHeight areaHeight.topHeight uiContext.px2vp(top.height) areaHeight.bottomHeight uiContext.px2vp(bottom.height)ComponentV2 export struct Example { // 获取数据 areaHeight AppStorageV2.connect(AreaHeight)! build() { Column() { } .padding({ top: this.areaHeight.topHeight, bottom: this.areaHeight.bottomHeight }) } }2PersistenceV2PersistenceV2 提供状态变量持久化能力需要注意的是PersistenceV2 必须与 UI 实例关联持久化操作需在 UI 实例初始化完成后调用即 loadContent 回调触发后而且不能持久化存储数组类型。export class Keys { value: string name_key } PersistenceV2.connect(Keys, () new Keys())更多使用限制可参考官方文档PersistenceV2 使用限制本章完整示例代码可参考gitee地址V2状态管理示例代码
