Deciding when to use a local state or global state
As we have seen through the examples, the Vue.js ecosystem has solutions for managing shared and global states. What we will look at now is how to decide whether something belongs in a local state or global state.
A good rule of thumb is that if a prop is passed through a depth of three components, it is probably best to put that piece of state in a global state and access it that way – so for example, a value goes from a parent to a child, and then on to a grandchild. This could also apply to two siblings and a parent, with three components but less depth.
The second way to decide whether something is local or global is to ask the question when the page reloads, does the user expect this information to persist? Why does this matter? Well, a global state is a lot easier to save and persist than a local state. This is due to the nature of a global state just being a JavaScript object as opposed to a component state, which...