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.

In the base class Context, the EventHub object is provided for communication within the UIAbility component instance. Before using EventHub to implement data communication between the UIAbility and UI, you must obtain an EventHub object. This section uses EventHub as an example.

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

   import { hilog } from '@kit.PerformanceAnalysisKit';
   import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
   // ···
   
   const DOMAIN = 0x0000;
   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, TAG, '%{public}s', 'Ability onCreate');
     }
   
     eventFunc(argOne: object, argTwo: object): void {
       hilog.info(DOMAIN, TAG, '1. ' + `${argOne}, ${argTwo}`);
       return;
     }
   
   // ···
   }
   

   EntryAbility.ets

2. 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 EventHubPage {
     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'
               });
             })
           // ···
           }
         }
       // ···
       }
       // ···
     }
   }
   

   EventHubPage.ets

3. 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"]
   

4. 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');
     }
   
   // ···
   }
   

   EntryAbility.ets

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.