Continuous deconstruction problem about storeToRefs

[Z1oftheKill]

What problem is this solving

I defined a store:
export const useUserStore = defineStore('user', { state: () => { return { userInfo: { userName: '' } } }, }

When I use it:

import { storeToRefs } from 'pinia' import { useUserStore } from '@/store' const { userInfo:{userName} } = storeToRefs(userStore)
At this point the userName becomes unresponsive.
What should I do to make it right?

Proposed solution

I think it can be deconstructed continuously

Describe alternatives you've considered

No response

[Z1oftheKill]

One more thing I want to make sure is that if you use storeToRefs you can't use the methods defined in actions?

[posva]

You can directly destructure actions: https://pinia.vuejs.org/core-concepts/#using-the-store

[posva]

You are losing reactivity by destructuring a primitive from a reactive object (https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-proxy-vs-original-1)

Do

const {userInfo} = storeToRefs(...)
// or
const store = useStore()

And then consume it through the object:

<p>{{ userInfo.username }}</p>
<p>{{ store.userInfo.username }}</p>

I recommend you to give the whole page a read, it should help in understanding how the reactivity works and why that case breaks. That way you won't fall for it again in the future 😄

[Z1oftheKill]

Thank you for your answers and suggestions. I will read the document again carefully