Implementing a powerful reactive store with Pinia

Central state management is not a concept private only to Vue, and the same pattern can be found in other libraries and frameworks. Just as in our basic reactive example, Pinia is a central state management tool that provides us with a single source of truth, meaning that a change in one of its values will propagate reactively to the entire application wherever is used. This state is shared among components in the application and gives us access to the full range of reactive tools Vue provides through a well-defined interface. It is easier to understand Pinia if first we build an example to show the results of using it. Running the code example will give us something like this:

Figure 7.5 – Central state management with Pinia

In this example, we build a store that not only exposes a reactive state but also implements computed values. As an officially supported project, Pinia also exposes implementations...