vue-memoized-composable

vue-memoized-composable

A Vue composable that memoizes the result of a function.

Install

pnpm install vue-memoized-composable

Example

import { createMemoizedComposable } from 'vue-memoized-composable'

const useUser = createMemoizedComposable((userId: Ref<string>) => {
  const { data } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId.value),
  })

  console.log('useUser', userId.value)

  return data
})

const userId = ref('1')

const user1 = useUser(userId)
const user2 = useUser(userId)
// user1 and user2 will be the same
// useUser will be called only once
// logs: useUser 1

const userId3 = ref('2')
const user3 = useUser(userId3)
// user3 will be a new instance
// useUser will be called again
// logs: useUser 2

Thanks

• vueuse
• @tanstack/vue-query

License

MIT License © Croatia Lu