Suggest an edit

Improve this article

Refine the answer for “What is Pinia?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Pinia** is a modern, official state manager for Vue.js.
It is the **recommended store for Vue 3** and fully replaces Vuex.

In simpler terms:

> **Pinia is a convenient centralized data store, built on the Composition API, with minimal boilerplate, no mutations, and excellent typing.**

---

## Why Pinia? (key facts for interviews)

- officially maintained by the Vue team
- simpler than Vuex
- does not use mutations (only state + getters + actions)
- built on the Composition API → compact, readable code
- excellent TypeScript support
- compatible with Vue DevTools
- automatically optimizes reactivity
- ideal for Vue 3

---

## A simple Pinia store example

### store/counter.js

```js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),

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

getters: {
    double: (state) => state.count * 2
  }
})
```

### Usage in a component:

```js
<script setup>
import { useCounterStore } from '@/store/counter'

const counter = useCounterStore()

counter.increment()
console.log(counter.count)
</script>
```

---

## Key features of Pinia

---

### 1. No mutations (unlike Vuex)

In Vuex it looked like this:

```
state → mutation → action → component
```

In Pinia it is much simpler:

```
state → action → component
```

We can change state directly **inside** an action:

```js
this.count++
```

---

### 2. Excellent TypeScript support

Pinia was built with TS in mind, unlike Vuex, which was "retrofitted" for it.

---

### 3. Hot Module Replacement (HMR)

During development you can change the store without reloading the page.

---

### 4. Plugin support

Pinia can be extended with:

- persist (saving to localStorage)
- logging
- analytics
- caching

---

### 5. SSR-friendly

Pinia works correctly with:

- Nuxt 3
- Vite SSR
- server-side rendering

---

## When should you use Pinia?

- an SPA with complex state
- applications with authorization
- stores with a shopping cart
- personal dashboards
- admin panels
- projects where typing matters
- real-time applications

Markdown · drag & drop images · ⌘B / ⌘I shortcuts337 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.