Introduction

In this chapter, we'll explore the concept of state management in Vue.

In previous chapters, we have seen how to use local state and props to hold state and share it in a parent-child component hierarchy.

We will begin by showing how to leverage state, props, and events to share state between components that are not in a parent-child configuration. These types of components are called siblings.

Figure 8.1: Child 1 and Child 2 are "sibling" components

Throughout the chapter, we will be building a profile card generator app that demonstrates how state flows down the component tree as props in an application, and how updates are propagated back up using events, event buses, and store updates.

Given that we want to build a profile card generator, we can break the application down into three sections: a Header, where we will have global controls and display the title of the page; a ProfileForm, where we will capture data...