如何在ArkTS中实现跨组件状态同步并展示代码？

Question

我在开发鸿蒙应用时，需要在不同组件间同步一个状态变量，比如用户登录状态。听说可以使用@Provide装饰器和@Consume装饰器，但具体怎么实现还不太清楚。能否提供一个示例代码，展示如何在两个组件间同步这个状态？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在ArkTS里实现跨组件状态同步其实挺简单的。你可以用@Provide装饰器在一个组件里提供状态，然后在另一个组件里用@Consume装饰器来消费这个状态。这样，当提供状态的组件更新状态时，消费状态的组件也会自动更新。

来，我给你看个简单的例子：

// ProviderComponent.ts
@Component
@Provide('userStatus')
struct ProviderComponent {
  userStatus: string = 'loggedOut';
 
  login() {
    this.userStatus = 'loggedIn';
  }
}
 
// ConsumerComponent.ts
@Component
@Consume('userStatus')
struct ConsumerComponent {
  userStatus: string;
 
  render() {
    return <Text>{this.userStatus}</Text>;
  }
}

在这个例子里，ProviderComponent提供了userStatus状态，ConsumerComponent则消费了这个状态。当ProviderComponent的login方法被调用时，userStatus会更新，ConsumerComponent也会自动重新渲染显示新的状态。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。