Using storeToRefs inside of another store is not working

[dbzx10299]

I am using nuxt3 and have a store useUserStore() and useWishlistStore()

In useUserStore I have code that looks like this

export const useUserStore = defineStore('user', () => {
  const user = ref(null)

  async function getUser() {
    user.value = await fetch(/* fetch the user */)
  }

  return { user, getUser }

})

Then in my wishlist store user is undefined

export const useWishlistStore('wishlist', () => {
  const { user } = storeToRefs(useUserStore())

  async function getWishlistItems() {
    // user is undefined
     const { data } = await fetch(`/wishlistItems?userId=${user.value.id}`)
     // ...
  }
})

I can do the exact same thing like this and not destructure and then user does have a value.

export const useWishlistStore('wishlist', () => {
  const userStore = useUserStore()

  async function getWishlistItems() {

     const { data } = await fetch(`/wishlistItems?userId=${userStore.user.id}`)
     // ...
  }
})

What is causing this to happen? In the header component I use getUser so the user value does update, and since closures close over a variable, and not it's value, I would expect when getUser fires, the user ref updates, and then later on when getWishlistItems is called it should have a value for user but it is always undefined.

[posva]

This can happen when stores are being cross used because the store object is not created for one of the stores. In practice, just use the store as a whole directly, it will work in all scenarios.

[dbzx10299]

Thanks for the help, I did read that link before but I‘m still confused why the storeToRefs does not work and using the whole store does. What is going on under the hood in general terms that makes a difference?

[posva]

When stores are cross used, whichever store gets its use... called first will exists as a placeholder in the other store until its own setup function returns. That's why storeToRefs() do not work there and should be avoided altogether with cross used stores