Nuxt•2y ago

Composable used in Component is not reactive

I created a composable "useTimeRecordings()" where I manage state of a few fields e.g.:

function useTimeRecordings() { ...
const recordingsPage = useState<number>('recordings-page', () => 1)
const recordings = useState<TimeRecord[] | null>('recordings', () => null)

if (recordings.value === null) {
    fetchRecordings(true).then(() => {
      console.log('fetch', recordings.value) //recordings set correctly...
    })
  }

return {
    recordings: computed(() => recordings.value)
  }
}

function useTimeRecordings() { ...
const recordingsPage = useState<number>('recordings-page', () => 1)
const recordings = useState<TimeRecord[] | null>('recordings', () => null)

if (recordings.value === null) {
    fetchRecordings(true).then(() => {
      console.log('fetch', recordings.value) //recordings set correctly...
    })
  }

return {
    recordings: computed(() => recordings.value)
  }
}

And in my component I am using:

const {recordings} = useTimeRecordings()

const {recordings} = useTimeRecordings()

And this value is not updated. Any idea why? I am assigning the array correctly, I am using computed props as return and yeah. 🤔 Is it because i am not "awaiting" the records? 🤔

3 Replies

Unknown User•2y ago

Message Not Public

Markus GeilehnerOP•2y ago

If i destructure a non computed version it would "remove" reactivity afaik. But yeah ... would not resolve my problem that recordings is not reactive when used in a component. Only if i am using await.

Unknown User•2y ago

Message Not Public

Gaming

Programming

Composable used in Component is not reactive