Sharing the same instance of a composable between several entities

[mrc-bsllt]

As per title, it would be nice to be able to share an instance of a composables between several components/pages etc...
Maybe add a unique key when instantiating the composable.
Something like this:

useMyCustomComposable.ts

export const useMyCustomComposable = ("unique-key", ...args) => {
  const itemsArray = ref([]);

  function addItem(item) {
    const newItem = toValue(item);
    itemsArray.value.push(newItem);
  }

  return {
    itemsArray,
    addItem,
  }
}

index.vue

<template>
  <div>
    <p>{{ itemsArray }}</p>
    <MyComponent />
  </div>
</template>

<script lang="ts" setup>
const { itemsArray } = useMyCustomComposable("unique-key");
</script>

MyComponent.vue

<template>
  <div>
    <button type="button" @click="addItem(item)">
      Add Item
    </button>
  </div>
</template>

<script lang="ts" setup>
const item = ref({ id: "test" })
const { addItem } = useMyCustomComposable("unique-key");
</script>

Yes, practically a kind of store.

[stafyniaksacha]

You should use provide/inject for this purpose https://vuejs.org/guide/components/provide-inject
For more complex usage, a store may fit better, like https://pinia.vuejs.org/

[mrc-bsllt]

yes, in my case a store fit better.

[nickmessing]

There's a createSharedComposable in vueUse.

In your case you'll do something like

export const useSharedInstance = createSharedComposable(() => useMyCustomComposable("unique-key"))

You can have something that "caches" shared composables based on unique-key, maybe along this lines:

const composablesCache = {}

export function useSharedCustomComposable(uniqueKey) {
  if (!composablesCache[uniqueKey]) {
    composablesCache[uniqueKey] = createSharedComposable(() => useMyCustomComposable(uniqueKey)
  }
  return composablesCache[uniqueKey]()
}