State Management

Note

Need help crafting the state approach for your application?

Reach out to one of the Codey team members, we're happy to help!

State management in Vue can be approached on three levels, depending on the scope and lifecycle of the data and complexity you are working with:

Level	Description	Typical Use Case	Recommended Tooling
Component State	State lives only inside a single component and is not shared.	Local form data, UI toggles, isolated logic.	Vue refs/reactive, component props, libraries like VeeValidate for validation.
Application / Instance State	State is shared between multiple components within the app instance.	Authentication, user preferences, app-wide settings.	Pinia (structured/global), or Vue Composables (flexible, can be instance or global).
Server State & Client-Side Caching	State represents remote data fetched from an API. Must handle loading, errors, caching, and updates.	Lists of customers, products, orders, or any backend-driven entity.	Vue Query (default choice), or Pinia/Composables for edge cases where full control is required.

Guidance: When to Use What

• Start as local as possible: keep state in the component if it does not need to be shared.
• If multiple components need to access or update the same state → move it to application state via Pinia or composables.
• If state comes from an API and requires caching, invalidation, or syncing with a backend → use Vue Query.

---