Props and events work well between a parent and its children, but they get awkward when many distant components need the same data, such as the logged-in user or a shopping cart. Pinia, Vue's official state management library, solves this by keeping shared data in a central store that any component can use.
A store has three parts: state (the data), getters (values derived from that data, like computed properties), and actions (functions that change it). If you have worked through the Composition API module, a store will feel familiar.
Watch the lessons in order. This is the final module, so finish by building the Projects.
Danny Connell builds a simple counter with data, methods, and a computed property inside one component, the code Pinia will soon replace.
What Pinia is, why Vue apps use it, and how it manages state outside any single component.
Defining the data in a Pinia store.
Writing actions: the store functions that change state.
Deriving values from store state with getters.
Binding a form input to store state, then using the same store from any component in your app.
A longer walkthrough of Pinia, a light-weight state management system for Vue 3 and the Composition API.