If you haven’t learned the basics of Pinia yet, you’ll first want to check out my other course here on Vue Mastery, called Pinia Fundamentals.

In Proven Pinia Patterns, we’ll examine some of the rules of Pinia —the required way of doing things—but we’re also going to take a look at some of the patterns—the recommended way to use Pinia to make your applications better organized, more clear, and super efficient.

We’ll look at an example project to get to know some of the rules and patterns in the context of a real application. The example project uses Pinia, Vue Router, the Google Maps API, and the Vue Use library of composables.

We won’t be building it from start to finish, but we’ll use it to look more closely at how Pinia can be used in an application that has several flows of data that need to be shared across the app.

Let’s take a peek at what the example project does. It’s a restaurant finder; type in the city and search term to find restaurants within a certain area. The user can register an account so they can save their favorites. And they can read information pulled from the Google Maps API such as ratings and reviews.

This app tracks its global state for each logical concern within its own Pinia store

The stores include

• Authentication of the user

• Geolocation to identify the location of the current user or the location they type into the city input bar

• Data about the restaurants that are retrieved in their search

• User favorites data as they add their favorite restaurants to their favorites list

In addition to seeing how we can can organize our Pinia stores, we’ll also learn about two different kinds of stores we can create: options stores vs setup stores. And we’ll learn about accessing and updating state throughout our application.

Finally, we’ll explore more unique features that come with Pinia, such as $patch, $reset, and Pinia plugins, which we can build from scratch.

Now that we have a better idea of where we’re headed, let’s take a minute to talk about why we would even choose to use Pinia when Vue 3’s Composition API already has a powerful built-in reactivity system with flexibility for sharing state. If you’ve been wondering whether Pinia is even necessary, I’ll address that in the next lesson. Let’s get started!