Pinia is used to help with managing state. What do we mean by state? In an application, some things you see on the screen don’t change. But other things have to change based on certain situations.
For example, if a user is not logged in, we might show them a button that says “Log In”. But if they are already logged in, we might hide that button. The rendered button all depends on the state of a user being logged in or not.
Now that we have an idea of what state is, the question becomes: how do we manage state across a Vue app full of components? Technically, we could store local state on each component within a data property or reactive ref, but what do we do when one component needs to communicate something about its state to a component in a completely different part of the component tree?
