createEventHook

分类

实用工具

导出大小

247 B

上次更改

3 个月前

创建事件钩子的工具

用法

创建一个使用 createEventHook 的函数

TypeScript

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
,
  }
}

import { createEventHook } from '@vueuse/core'
export function useMyFetch(url) {
  const fetchResult = createEventHook()
  const fetchError = createEventHook()
  fetch(url)
    .then((result) => fetchResult.trigger(result))
    .catch((error) => fetchError.trigger(error.message))
  return {
    onResult: fetchResult.on,
    onError: fetchError.on,
  }
}

使用一个使用 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>

类型声明

显示类型声明

/**
 * 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.cn/createEventHook
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function createEventHook
<T
 = any>(): EventHookReturn
<T
>