When to Use Local State and When to Save to Global State

As we have seen through the common ancestor, event bus, and Vuex examples, the Vue.js ecosystem has solutions for managing shared and global state. What we will look at now is how to decide whether something belongs in 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 global state and access it that way.

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, global state is a lot easier to save and persist than local state. This is due to global state's nature as just a JavaScript object as opposed to component state, which is more closely tied to the component tree and Vue.js.

Another key idea to bear in mind is that it is very much possible to mix Vuex and local state...