HarmonyOS EXT跨多个组件之间如何进行数据通信

HarmonyOS EXT跨多个组件之间如何进行数据通信

问题描述 HarmonyOS EXT跨多个组件之间如何进行数据通信

应用场景： app用户登录后的登录状态和用户信息，需要传递到许多相邻的页面和组件中

解决方案一：

【应用级变量的状态管理】

使用AppStorage使用应用全局的UI状态存储相关的装饰器：@StorageProp (单向)和@StorageLink （双向 不建议）

方案1：

//登录页面
AppStorage.setOrCreate('isLogin', true);



// 其他页面及组件
@Component
struct CompA {
  @StorageProp('isLogin') loginStateA: Boolean = false;

  build() {
    Column({ space: 20 }) {
        if(loginStateA){
            Text(`用户已经登录`)
        }else{
             Text(`用户未登录`)
        }
      
    }
  }
}


@Component
struct CompB {
  @StorageProp('isLogin') loginStateB: Boolean = false;

  build() {
    Column({ space: 20 }) {
        if(loginState){
            Text(`用户已经登录`)
        }else{
             Text(`用户未登录`)
        }
      
    }
  }
}

解决方法二

使用Emitter进行【线程间通信】：在父组件发送事件，子组件或其他组件里面监听事件和数据变化，来触发子组件里面的其他方法，这样也能实现父组件调用子组件；反之也能实现子组件触发父组件的方法

好处：可以跨组件， 注意：需要在公共文件里面订阅好 不同Emitter事件的不同eventId 标识，避免互相干扰

发布事件

import { emitter } from '@kit.BasicServicesKit';


// 定义一个eventId为1的发送事件，事件优先级为Low
let event: emitter.InnerEvent = {
  eventId: 1,
  priority: emitter.EventPriority.LOW
};

let eventData: emitter.EventData = {
  data: {
    content: 'c',
    id: 1,
    isLogin: false
  }
};

// 发送eventId为1的事件，事件内容为eventData
(event, eventData);

订阅事件

import { emitter } from '@kit.BasicServicesKit';
import { promptAction } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';

ct TAG: string = 'ThreadModel';
ct DOMAI_UMBER: number = 0xFF00;

// 定义一个eventId为1的接收事件
let event: emitter.InnerEvent = {
  eventId: 1
};

// 收到eventId为1的事件后执行该回调，这里就是编写其他函数
let callback = (eventData: emitter.EventData): void => {
  promptAction.showToast({
    message: JSO.stringify(eventData)
  });
  hilog.info(DOMAI_UMBER, TAG, 'event callback:' + JSO.stringify(eventData));
};

// 订阅eventId为1的事件，接收到数据后，立刻触发回调函数
(event, callback);
promptAction.showToast({
  message: JSO.stringify('emitter subscribe success')
});