createSharedComposable

使一个可组合函数可以在多个 Vue 实例中使用。使用 createSharedComposable 来共享一个可组合函数的状态，使得多个组件可以复用同一个响应式状态，而不会重复创建新的状态或事件监听器。

使用

import { createSharedComposable, useMouse } from '@vueuse/core'

// 使用 createSharedComposable 包装 useMouse，返回一个新的可组合函数 useSharedMouse
const useSharedMouse = createSharedComposable(useMouse)

// CompA.vue
// 在组件 CompA.vue 中调用 useSharedMouse()，获取到鼠标位置的响应式状态 x 和 y。
// 此时，useSharedMouse 第一次被调用，内部会执行 useMouse()，并缓存其返回的状态。
const { x, y } = useSharedMouse()

// CompB.vue - will reuse the previous state and no new event listeners will be registered
// 在组件 CompB.vue 中再次调用 useSharedMouse()。
// 此时不会重新执行 useMouse()，而是直接返回之前缓存的状态，即 CompA.vue 和 CompB.vue 共享同一组 x 和 y 值。
const { x, y } = useSharedMouse()

适用场景：

跨组件共享响应式状态：如鼠标位置、窗口大小、主题设置等。
减少资源消耗：避免在多个组件中重复创建相同的副作用（如事件监听器、定时器等）。
保持状态一致性：多个组件间需要保持状态同步时，如共享的表单数据、UI 状态等。

类型声明

export type SharedComposableReturn<T extends AnyFn = AnyFn> = T
/**
 * 使一个可组合函数可以被多个 Vue 实例使用。
 *
 * @see https://vueuse.org/createSharedComposable
 */
export declare function createSharedComposable<Fn extends AnyFn>(
  composable: Fn,
): SharedComposableReturn<Fn>

createInjectionState

injectLocal