4a3ce4cc1d
Add comprehensive reference documentation for: - Vitest: environments, projects/workspaces, type testing, vi utilities - Pinia: HMR, Nuxt integration, SSR setup - Vue: built-in components (Transition, Teleport, Suspense, KeepAlive) and advanced directives
87 lines
1.9 KiB
Markdown
87 lines
1.9 KiB
Markdown
---
|
|
category: Utilities
|
|
---
|
|
|
|
# createEventHook
|
|
|
|
Utility for creating event hooks
|
|
|
|
## Usage
|
|
|
|
Creating a function that uses `createEventHook`
|
|
|
|
```ts
|
|
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`
|
|
|
|
```vue
|
|
<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
|
|
|
|
```ts
|
|
/**
|
|
* 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>
|
|
```
|