From the beginning when Vue was v0.12 (5 years ago) and Vuex didn’t exist yet and I had to make own “global” state storage. I had to use $root to access the properties from any component with ease and Crossroads.js for the routing. The Root component didn’t need template, just components, data and sometimes computed to make it one-direction data flow and watch for saving data in localStorage. You add components on your page very easily like you do today.
When Vue getting older, I see great community, making awesome features. Suddenly there’s Vuex that really look like Redux (React). What an awful way to implement, and the whole flock is flocking and hyping them too.
Never add feature that add more complexity. Keep It Simple Stupid. Hell, I didn’t like Vue (.vue) files; prefer Node-way, but after hearing Evan explaining it, it’s actually great.
Without further ado, I create some file structure I use, to build my cv-builder Nuxt app, but first I show a simple concept.
You have access $$store in every Vue component
ES6 Without any building tools or CLI generators
In storeNote.js we create a state with object properties and some methods that mutates some values.
Have state and methods exposed.
Make index.html with templates
Import Vue and other libraries & components and with spread ... operator to include methods from the Store storeNote.
Easy access storeNote by importing it and include methods from it.
That’s what it’s about. Make things simple.
I will include example with Routes or probably use with Crossroads.js, I haven't decided. vue-router looks pretty solid, seeing from the examples.