HarmonyOS 状态管理 V2 实战教程

@Entry
@ComponentV2
struct Counter {
  @Local count: number = 0;        // 基本类型：赋值即刷新
  @Local tags: string[] = [];      // 数组：push / splice / 整体替换均可观测

  build() {
    Column({ space: 12 }) {
      Text(`当前计数：${this.count}`).fontSize(22)
      Button('+1').onClick(() => { this.count++ })   // 自动刷新 UI
      Button('加标签').onClick(() => this.tags.push('new'))
    }
    .padding(20)
  }
}

@ComponentV2
struct TitleBar {
  @Require @Param title: string;            // 必传：不传编译报错
  @Param subtitle: string = '默认副标题';   // 可选：带默认值

  build() {
    Column() {
      Text(this.title).fontSize(24).fontWeight(700)
      Text(this.subtitle).fontColor(Color.Gray)
    }
  }
}

@Entry
@ComponentV2
struct Page {
  @Local title: string = '首页';
  build() {
    Column() {
      TitleBar({ title: this.title })   // @Param 单向：父变→子变
    }
  }
}

@ObservedV2
class Address {
  @Trace city: string = '';
}

@ObservedV2
class User {
  @Trace name: string = '';
  @Trace age: number = 0;
  @Trace address: Address = new Address();   // 嵌套对象，照样深度观测
}

@Entry
@ComponentV2
struct Profile {
  @Local user: User = new User();

  build() {
    Column({ space: 10 }) {
      Text(`${this.user.name} / ${this.user.age}`)
      Text(`城市：${this.user.address.city}`)
      Button('改名').onClick(() => { this.user.name = '张三' })          // 属性级最小更新
      Button('换城市').onClick(() => { this.user.address.city = '北京' }) // 深层修改也能刷新
    }
    .padding(20)
  }
}

@ComponentV2
struct Stepper {
  @Param value: number = 0;
  @Event $value: (v: number) => void = () => {};   // 事件名必须是 $ + Param 名

  build() {
    Row({ space: 10 }) {
      Button('-').onClick(() => this.$value(this.value - 1))
      Text(`${this.value}`)
      Button('+').onClick(() => this.$value(this.value + 1))
    }
  }
}

@Entry
@ComponentV2
struct Page {
  @Local num: number = 0;
  build() {
    Column() {
      Stepper({ value: this.num, $value: (v) => { this.num = v } })
    }
  }
}

@Entry
@ComponentV2
struct Page {
  @Local num: number = 0;
  build() {
    Column() {
      // this.num!! 自动展开为 { value: this.num, $value: v => this.num = v }
      Stepper({ value: this.num!! })
    }
  }
}

@Entry
@ComponentV2
struct Cart {
  @Local items: number[] = [10, 20, 30];

  @Computed
  get total(): number {
    return this.items.reduce((s, v) => s + v, 0);   // 仅依赖变化时重算
  }

  @Computed
  get isEmpty(): boolean {
    return this.items.length === 0;
  }

  build() {
    Column({ space: 10 }) {
      Text(`合计：${this.total}`)
      Text(`状态：${this.isEmpty ? '空' : '有货'}`)
      Button('加一条').onClick(() => this.items.push(50))
    }
    .padding(20)
  }
}

@ObservedV2
class Form {
  @Trace keyword: string = '';
  @Trace page: number = 1;
}

@Entry
@ComponentV2
struct SearchPage {
  @Local form: Form = new Form();

  // 监听深层属性（路径写法），任意一项变化都会触发
  @Monitor('form.keyword', 'form.page')
  onFormChange(monitor: IMonitor) {
    monitor.dirty.forEach((path: string) => {
      console.info(`${path}: ${monitor.value(path)?.before} -> ${monitor.value(path)?.now}`);
    });
    // 这里发起搜索请求……
  }

  build() {
    Column() {
      TextInput({ text: this.form.keyword })
        .onChange(v => this.form.keyword = v)
    }
    .padding(20)
  }
}

@Entry
@ComponentV2
struct Root {
  @Provider('theme') theme: string = 'dark';   // 提供方：必须本地初始化

  build() {
    Column() {
      Button('切换主题')
        .onClick(() => { this.theme = this.theme === 'dark' ? 'light' : 'dark' })
      Child()
    }
  }
}

@ComponentV2
struct Child {
  @Consumer('theme') theme: string = 'light';  // 消费方：有默认值兜底

  build() {
    Column() {
      Text(`当前主题：${this.theme}`)   // 任意一方修改，另一方同步
    }
  }
}

@ComponentV2
struct ConfigPanel {
  @Once @Param initialCount: number = 0;   // 仅首次从父组件取值
  @Local count: number = this.initialCount;

  build() {
    Column() {
      Text(`初始快照：${this.initialCount}`)
      Text(`当前：${this.count}`)
    }
  }
}