Pinia, an Alternative Vue.js Store

An alternative option for creating a store for your Vue.js application is Pinia. Pinia is the new kid on the block when it comes to stores for Vue. It was started by Vue core team member Eduardo San Martin Morote with the first commit to the repo being made on Nov 18, 2019. Pinia boasts an intuitive API and many of the features you've come to expect from a Vue.js store.

Pinia supports both Vue 2 and Vue 3 but the examples I show below are all for Vue 3 using Pinia 2 (currently in alpha). There are minor differences between Pinia for Vue 2 and Vue 3, so check out the official Pinia docs for more info.

After it's done installing you'll need to import createPinia from the Pinia library and add it as a Vue plugin with the use() method on your Vue app.

A store in Pinia is approached a little differently than the store in Vuex. In Vuex there is a single primary store available across the entire app (though you can break it up into modules if desired). Pinia, on the other hand, is modular out of the box. There is no single main store, but rather you create different stores and name them as makes sense for your application. For example, we can create a logged in user store.

Leave a Comment