Idea: useSingleton

An SSR-friendly singleton / lazy initialization implementation.

When you call the function, it will use inject() to reuse the previous instance. If it’s not found, initialize one and provide it to the app root. This could be useful to implement event pools and free up the event registration for each call/each component, for example onKeyStoke and #422 without the need to do the global registration like app.use(xx).

Usage example

const useHey = useAppSingleton(()=>{
  console.log('Hi')
  return ref(1)
})

const a = useHey() // console: 'Hi'
const b = useHey() // no console output, reused
const same = a === b // true

Implementaion

Waiting for the effectScope API to be shipped, otherwise, it only works for the effect-free factories.

App based

function useAppSingleton<T>(factory: () => T, key: string | Symbol = Symbol()): () => T {
  return () => {
    let injected = inject<T>(key)
      if (!injected) {
      const vm = getCurrentInstance()
      const app = vm?.appContext.app
      // TODO: effectScope
      injected = factory()
      app?.provide(key, injected)
    }
    return injected
  }
}

General (not SSR friendly)

function useSingleton<T>(factory: () => T, lazy = true): () => T {
  let data: T | undefined
  if (!lazy)
    // TODO: effectScope
    data = factory()
  return () => {
    if (!data)
      // TODO: effectScope
      data = factory()
    return data
  }
}

[antfu]

Will it work with Vue2 also?

Yeah, I think it could be when effectScope get backported to Vue 2. Which I think could take a while, would focus on Vue 3.1 first.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.