Learning Vue

Chapter 9. State Management with Pinia

The previous chapter guided us through building our application’s routings using Vue Router, including nested routes, route guards, and dynamic route navigation.

In this chapter, we will learn state management and how to manage the data flow within our Vue application using Pinia, the officially recommended state management library for Vue. We will also explore how to build our application’s reusable and efficient data state management system.

Understanding State Management in Vue

Data makes an application come to life and connects components. And components interact with users and with others using data states. State management is crucial for building an application that works with actual data, regardless of size and complexity. For example, we can display only a gallery of product cards with a list of pizzas and their details. Once a user adds a product to the cart within this gallery component, we need to update the cart’s data and display the updated cart’s data in the cart component at the same time as updating the chosen product’s remaining stock.

Take our Pizza House application, for example. In the main view (App.vue), we have a header component (HeaderView) and a gallery of pizza cards (PizzasView). The header contains a cart icon that displays the number of items in the cart, while the gallery includes a list of pizza cards, each with a button allowing the user to add the selected item to the cart. Figure 9-1 illustrates the hierarchical ...