stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/createEventHook.md

category

category
Utilities

createEventHook

Utility for creating event hooks

Usage

Creating a function that uses createEventHook

import { createEventHook } from '@vueuse/core';

export function useMyFetch(url) {
  const fetchResult = createEventHook<Response>();
  const fetchError = createEventHook<any>();

  fetch(url)
    .then((result) => fetchResult.trigger(result))
    .catch((error) => fetchError.trigger(error.message));

  return {
    onResult: fetchResult.on,
    onError: fetchError.on,
  };
}

Using a function that uses createEventHook

<script setup lang="ts">
import { useMyFetch } from './my-fetch-function';

const { onResult, onError } = useMyFetch('my api url');

onResult((result) => {
  console.log(result);
});

onError((error) => {
  console.error(error);
});
</script>

Type Declarations

/**
 * The source code for this function was inspired by vue-apollo's `useEventHook` util
 * https://github.com/vuejs/vue-apollo/blob/v4/packages/vue-apollo-composable/src/util/useEventHook.ts
 */
type Callback<T> =
  IsAny<T> extends true
    ? (...param: any) => void
    : [T] extends [void]
      ? (...param: unknown[]) => void
      : [T] extends [any[]]
        ? (...param: T) => void
        : (...param: [T, ...unknown[]]) => void;
export type EventHookOn<T = any> = (fn: Callback<T>) => {
  off: () => void;
};
export type EventHookOff<T = any> = (fn: Callback<T>) => void;
export type EventHookTrigger<T = any> = (...param: Parameters<Callback<T>>) => Promise<unknown[]>;
export interface EventHook<T = any> {
  on: EventHookOn<T>;
  off: EventHookOff<T>;
  trigger: EventHookTrigger<T>;
  clear: () => void;
}
export type EventHookReturn<T> = EventHook<T>;
/**
 * Utility for creating event hooks
 *
 * @see https://vueuse.org/createEventHook
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function createEventHook<T = any>(): EventHookReturn<T>;