Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке Pinia?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Pinia** - це сучасний, офіційний менеджер стану (state manager) для Vue.js.
Він є **рекомендованим стором для Vue 3** і повністю замінює Vuex.

Простіше кажучи:

> **Pinia - це зручне централізоване сховище даних, побудоване на Composition API, з мінімальним boilerplate, без мутацій і з чудовою типізацією.**

---

## Чому Pinia? (ключові факти для співбесіди)

- офіційно підтримується командою Vue
- простіша, ніж Vuex
- не використовує мутації (тільки state + getters + actions)
- працює на Composition API → компактний і читабельний код
- чудова підтримка TypeScript
- сумісна з Vue DevTools
- автоматично оптимізує reactivity
- ідеально підходить для Vue 3

---

## Простий приклад Pinia стору

### 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
  }
})
```

### Використання в компоненті:

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

const counter = useCounterStore()

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

---

## Ключові особливості Pinia

---

### 1. Немає мутацій (на відміну від Vuex)

У Vuex було так:

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

У Pinia - набагато простіше:

```
state → action → component
```

Ми можемо змінювати state прямо **всередині** action:

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

---

### 2. Чудова підтримка TypeScript

Pinia була створена з урахуванням TS, на відміну від Vuex, який «допилювали».

---

### 3. Hot Module Replacement (HMR)

Під час розробки можна змінювати store без перезавантаження сторінки.

---

### 4. Підтримка плагінів

Pinia можна розширювати:

- persist (збереження в localStorage)
- logging
- analytics
- caching

---

### 5. SSR-дружність

Pinia коректно працює з:

- Nuxt 3
- Vite SSR
- серверним рендерингом

---

## Коли використовувати Pinia?

- SPA зі складним станом
- застосунки з авторизацією
- магазини, де є кошик
- особисті кабінети
- панелі керування (admin)
- проєкти, де важлива типізація
- real-time застосунки

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати321 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.