harmony 鸿蒙Data Synchronization Between UIAbility and UI Page

2023-02-03
浏览 (993)

Data Synchronization Between UIAbility and UI Page

Based on the application model, you can use any of the following ways to implement data synchronization between UIAbility components and UI pages:

Using EventHub for Data Synchronization: The EventHub object is provided by the base class Context. It allows events to be transferred using the publish/subscribe (pub/sub) pattern. Specifically, after subscribing to an event, your application will receive the event and process it accordingly when the event is published.
Using AppStorage or LocalStorage for Data Synchronization: ArkUI provides two application-level state management solutions: AppStorage and LocalStorage, which implement application- and UIAbility-level data synchronization, respectively.

Using EventHub for Data Synchronization

EventHub provides an event mechanism for the UIAbility component so that they can subscribe to, unsubscribe from, and trigger events.

Before using the APIs provided by EventHub, you must obtain an EventHub object, which is provided by the base class Context.

Call eventHub.on() in the UIAbility in either of the following ways to register a custom event event1.

import { hilog } from '@kit.PerformanceAnalysisKit';
import { UIAbility, Context, Want, AbilityConstant } from '@kit.AbilityKit';


const DOMAIN_NUMBER: number = 0xFF00;
const TAG: string = '[EventAbility]';


export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    // Obtain an eventHub object.
    let eventhub = this.context.eventHub;
    // Subscribe to the event.
    eventhub.on('event1', this.eventFunc);
    eventhub.on('event1', (data: string) => {
      // Trigger the event to complete the service operation.
    });
    hilog.info(DOMAIN_NUMBER, TAG, '%{public}s', 'Ability onCreate');
  }


  // ...
  eventFunc(argOne: Context, argTwo: Context): void {
    hilog.info(DOMAIN_NUMBER, TAG, '1. ' + `${argOne}, ${argTwo}`);
    return;
  }
}

Call eventHub.emit() on the UI page to trigger the event, and pass in the parameters as required.

import { common } from '@kit.AbilityKit';


@Entry
@Component
struct Page_EventHub {
  private context = this.getUIContext().getHostContext() as common.UIAbilityContext;


  eventHubFunc(): void {
    // Trigger the event without parameters.
    this.context.eventHub.emit('event1');
    // Trigger the event with one parameter.
    this.context.eventHub.emit('event1', 1);
    // Trigger the event with two parameters.
    this.context.eventHub.emit('event1', 2, 'test');
    // You can design the parameters based on your service requirements.
  }


  build() {
    Column() {
      // ...
      List({ initialIndex: 0 }) {
        ListItem() {
          Row() {
            // ...
          }
          .onClick(() => {
            this.eventHubFunc();
            this.getUIContext().getPromptAction().showToast({
              message: 'EventHubFuncA'
            });
          })
        }


        // ...
        ListItem() {
          Row() {
            // ...
          }
          .onClick(() => {
            this.context.eventHub.off('event1');
            this.getUIContext().getPromptAction().showToast({
              message: 'EventHubFuncB'
            });
          })
        }
        // ...
      }
      // ...
    }
    // ...
  }
}

Obtain the event trigger result from the subscription callback of the UIAbility. The run log result is as follows:

[Example].[Entry].[EntryAbility] 1. []
[Example].[Entry].[EntryAbility] 1. [1]
[Example].[Entry].[EntryAbility] 1. [2,"test"]

When event1 is not needed, call eventHub.off() to unsubscribe from the event.

import { UIAbility } from '@kit.AbilityKit';


export default class EntryAbility extends UIAbility {
  // ... 
  onDestroy(): void {
    this.context.eventHub.off('event1');
  }
}

Using AppStorage or LocalStorage for Data Synchronization

ArkUI provides two application-level state management solutions: AppStorage and LocalStorage, which implement data synchronization at the application or UIAbility level, respectively. Both solutions can be used to manage the application state, enhance application performance, and improve user experience. The AppStorage is a global state manager that manages state data shared among multiple UIAbility components. The LocalStorage is a local state manager that manages state data used inside a single UIAbility. They help you control the application state more flexibly and improve the maintainability and scalability of applications. For details, see State Management of Application-Level Variables.