Jump Start Vue.js, 2nd Edition

Chapter 6: State Management

As an application gets larger and more complex, you start to run into situations where a given piece of state needs to be used in multiple components. State can be information that your app works with—for example, the details of the logged-in user, or the current “state” of some parts of the UI, such as whether a particular piece of functionality is disabled or data is being loaded.

A common solution is to “lift” that piece of state out of the component where it’s being used and into the nearest parent. This can work fine when the components are close siblings, and the state doesn’t reside too far up the tree, but otherwise it can lead to what’s called “prop drilling”—having to pass down props through several layers ...