HarmonyOS 鸿蒙Next关于文档中@State例子的一个问题

HarmonyOS 鸿蒙Next关于文档中@State例子的一个问题

export default class PlayDetailViewModel {
coverUrl: string = '#00ff00'

changeCoverUrl= (model:PlayDetailViewModel) => {
model.coverUrl = '#00F5FF'
}

}
import PlayDetailViewModel from './PlayDetailViewModel'

@Entry
@Component
struct PlayDetailPage {

  [@State](/user/State) vm: PlayDetailViewModel = new PlayDetailViewModel();

  build() {

    Stack() {

      Text(this.vm.coverUrl).width(100).height(100).backgroundColor(this.vm.coverUrl)

      Row() {

        Button('点击改变颜色')
          .onClick(() => {

            let self = this.vm;

            this.vm.changeCoverUrl(self);

          })

      }

    }
    .width('100%')
    .height('100%')
    .alignContent(Alignment.Top)

  }

}

为什么下面的可以

let self = this.vm;
this.vm.changeCoverUrl(self);

但是下面的就不行嘞

this.vm.changeCoverUrl(this.vm);

更多关于HarmonyOS 鸿蒙Next关于文档中@State例子的一个问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

看完文档其实就知道了

在这一小节解释了

使用a.b(this.object)形式调用，不会触发UI刷新

在build方法内，当@State装饰的变量是Object类型、且通过a.b(this.object)形式调用时，b方法内传入的是this.object的原生对象，修改其属性，无法触发UI刷新。如下例中，通过静态方法Balloon.increaseVolume或者this.reduceVolume修改balloon的volume时，UI不会刷新。

根本原因就是“通过a.b(this.object)形式调用时，b方法内传入的是this.object的原生对象”

感谢大家回复

更多关于HarmonyOS 鸿蒙Next关于文档中@State例子的一个问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


对，得重新赋值，才会触发刷新，以前都是碰到赋值一下JSON.parse(JSON.stringify(this.vm))，楼主的方法厉害，学到了，

在HarmonyOS鸿蒙Next中，@State是一个装饰器，用于标记组件内部的状态变量。当状态变量发生变化时，使用该变量的UI组件会自动重新渲染。文档中的例子可能展示了如何在组件中使用@State来管理状态。例如：

@Entry
@Component
struct MyComponent {
  @State count: number = 0

  build() {
    Column() {
      Text(`Count: ${this.count}`)
        .fontSize(30)
      Button('Click me')
        .onClick(() => {
          this.count++
        })
    }
  }
}

在这个例子中，@State装饰的count变量用于存储点击次数。每次点击按钮时，count值增加，Text组件会自动更新显示最新的count值。@State的作用是确保UI与状态保持同步。

回到顶部