vue-pinia-best-practices

To prevent reactivity loss when destructuring Pinia stores in Vue 3, use the `storeToRefs` function to extract state and getters, ensuring reactive references remain intact in your components.

The best way to structure Pinia setup stores is to define state as `ref` or `reactive` variables and return them explicitly, enabling flexible composition and predictable state management patterns in Vue 3.

Pinia state stops updating the UI when properties are destructured directly without `storeToRefs`, breaking the reactive connection. Use `storeToRefs` for state and getters to maintain UI updates.

Yes, you can use Pinia setup stores for SSR in Vue 3, but you must follow specific compatibility patterns to avoid shared state pollution across requests by properly initializing and hydrating store instances.

Common Pinia gotchas in large Vue 3 projects include improper storeToRefs usage causing reactivity loss, incorrect destructuring of actions, and failing to follow SSR compatibility patterns, which lead to runtime errors.

You need to use `storeToRefs` whenever you want to destructure state or getters from a Pinia store while preserving their reactivity. Direct access without it is safe only for calling actions.