Skip to main content

What is Pinia?

VueJunior~2 min read
Suggest an edit

Pinia is a modern, officially recommended global state management library for Vue.js. It was created as a replacement for Vuex, and starting with Vue 3, Pinia is considered the standard for working with global state.

In simpler terms:

Pinia is a way to store an application's shared data (user, cart, settings) and use it in any component.

Why do you need Pinia?

As an application grows, it becomes inconvenient to pass data through props or keep it in a single component. For example:

  • user authentication
  • a shopping cart
  • theme settings
  • a list of categories
  • global notifications

This data is needed by different parts of the application → so it needs to be stored globally → in Pinia.

The main advantages of Pinia

1) Simple API

Pinia is lighter than Vuex:

  • no huge boilerplate
  • no mandatory mutations
  • minimal ceremony
  • logic is written in plain JavaScript

2) Full typing out of the box (TypeScript)

Pinia was built with TS in mind; everything is typed automatically.

3) Reactivity like in the Composition API

You can use ref and reactive directly in a store.

4) Support for SSR, DevTools, and Hot Module Reload

Very convenient in large projects.

5) Easy splitting into modules

Each store is like a separate module:

javascript
user store cart store products store theme store

A simple example: creating a store

stores/user.js

javascript
import { defineStore } from 'pinia' export const useUserStore = defineStore('user', { state: () => ({ user: null, isLoggedIn: false }), actions: { login(user) { this.user = user this.isLoggedIn = true }, logout() { this.user = null this.isLoggedIn = false } } })

Usage in a component

javascript
<script setup> import { useUserStore } from '@/stores/user' const userStore = useUserStore() console.log(userStore.user) userStore.login({ name: "Tim" }) </script>

What entities does Pinia have?

A Pinia store consists of:

state

The data store (reactive):

javascript
state: () => ({ count: 0 })

getters

The equivalent of computed:

javascript
getters: { doubleCount(state) { return state.count * 2 } }

actions

The methods of your store:

javascript
actions: { increment() { this.count++ } }

When should you use Pinia?

When:

  • data is needed by several components
  • data must survive across pages
  • you need to avoid "prop drilling through 5 levels"
  • you need to centrally store the user, products, settings, filters
  • you need to cache API requests

Summary (short)

Pinia is a simple, modern, and flexible global state management library for Vue.js.

It:

  • replaces Vuex,
  • works like the Composition API,
  • is simple and typed-friendly,
  • makes it easy to share state between components.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit