Create Vue3 unique shared composables based on keys.

This is similar to the createSharedComposable and createGlobalStates of vueuse, however, uses keys to create independent shared states.

Install

Using pnpm:

pnpm add create-unique-shared-composable

Using yarn:

yarn add create-unique-shared-composable

Using npm:

npm install create-unique-shared-composable

Usage

import { createUniqueSharedComposable } from 'create-unique-shared-composable'

const useFoo = createUniqueSharedComposable((_) => {
  const counter = ref(0)
  const doubled = computed(() => counter.value * 2)
  return {
    counter,
    doubled
  }
})

const { counter, doubled } = useFoo('key')
const { counter: counter1, doubled: doubled1 } = useFoo('key')
const { counter: counter2, doubled: doubled2 } = useFoo('key2')

counter.value++
console.log(counter.value) // 1
console.log(doubled.value) // 2

console.log(counter1.value) // 1
console.log(doubled1.value) // 2

console.log(counter1.value) // 0
console.log(doubled1.value) // 0

Contributing

Contributions are welcome! If you have ideas, bug fixes, or improvements, please open an issue or submit a pull request on the GitHub repository.

Give a ⭐️ if this project helped you!

License

This project is licensed under the MIT License. See the LICENSE file for more details.