midVue.js
How do you handle 'Global State' without a library like Pinia?
Updated May 4, 2026
Short answer
You can use a reactive object exported from a standalone JavaScript file.
Deep explanation
Because Vue 3's reactivity system is decoupled from the component instance, you can simply create a reactive or ref object in one file and import it into many components. They will all share the same state and update reactively.
Real-world example
Handling a simple 'Theme Switcher' or 'Sidebar Toggle' state in a small application where Pinia would be overkill.
Common mistakes
- Exporting a plain object instead of a reactive one (it won't trigger UI updates).
Follow-up questions
- What is the downside of this approach?