Using Pinia for state management

In this section, we’ll focus on making our application stateful using Pinia. This means we will have to refactor existing code, optimize certain flows, and add new features to our application.

Stateful applications

We use the term stateful applications to describe applications that can use, save, and persist data for a certain amount of time. A state can be temporary (while a session lasts) or of a more permanent nature when stored in a database.

The state is contextual to the current user and is typically not shared between users. In short, it is representative of the current user's state of interacting with an application.

Adding Pinia

Pinia is a framework for managing states of applications built using Vue.js 3. It aims to facilitate sharing and interacting with a state or store by leveraging composables and simple syntax.

Let’s add Pinia to our project by installing it using the command line:

npm install pinia...