Composables: how to share and not to share state between multiple instances?

[goodpixels]

I've created a composable which does some transformations to passed values and returns the result.

All was working as expected, until I had to render multiple instances of a component which is using this composable internally and the result is that each instance (list items) which is using this composable returns the same values (those set by the first instance). How can I avoid this?

I would like to ensure that the composable does not share its state between instances.

Thank you!

[Alfred-Skyblue]

export function useState<T>(value: T) {
  const state:Ref<T> = ref(value)

  const setState = (value: T) => {
    state.value = value
  }
  return [state, setState]
}

[goodpixels]

Thank you, but this does not answer my question, which I admit, perhaps wasn't too clear.

I would like to know how to NOT share state between several instances of a composable. Can someone please help? Thank you!

[Alfred-Skyblue]

Can you provide a demo? I don't know your business scenario.

[gzf6]

How to keep data from being shared in this situation?

export function useFetchList(fetchList) {
    const { data } = useAsyncData(() => fetchList())
    return {
      data
    }
}

[LinusBorg]

By not using useAsynData()

[gzf6]

I tried it yesterday. Just add different keys to useAsyncData according to your own rules.

[LinusBorg]

Share state:

const state = ref(false)

export function useToggle() {
  const toggle = () => state.value = !state.value
  return {
    state: readonly(state)
    toggle,
  }
}

no shared state:

export function useToggle() {
  const state = ref(false)
  const toggle = () => state.value = !state.value
  return {
    state: readonly(state)
    toggle,
  }
}

[gzf6]

In the following case, data seems to be shared

export function useFetchList(fetchList) {
    const { data } = useAsyncData(() => fetchList())
    return {
      data
    }
}

[LinusBorg]

Yeah well, that's because Nuxt's useAsyncData caches data.

[KarmaBlackshaw]

How would you guys share for the loading variable here?

export function useLoadingFoo() {
  const { loading } = useFoo()

  return {
    loading
  }
}