vue-pinia-best-practices

To destructure a Pinia store without losing reactivity, use the storeToRefs function. This method preserves reactivity for state and getters, while actions can be safely destructured directly without wrappers.

The best way to set up Pinia stores for large-scale Vue applications is using setup stores. Ensure all state, getters, and actions are explicitly returned to maintain accessibility and predictable state management patterns.

Pinia state becomes undefined during routing if the store is accessed before Pinia is installed on the Vue app. Ensure safe routing integration by registering the Pinia plugin before mounting the application.

Yes, you must return all state in Pinia setup stores. Unlike option stores, setup stores require explicitly returning state variables and actions so they remain accessible to Vue components.

Common Pinia reactivity gotchas include destructuring reactive state without storeToRefs, modifying state outside of actions, and failing to return state correctly from setup stores, which breaks template bindings.