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

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

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

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

Контент

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

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

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

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

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

**Pinia** - це сучасне, офіційно рекомендоване **глобальне сховище стану** (state management) для Vue.js.
Її створили як заміну Vuex, і починаючи з Vue 3 Pinia вважається **стандартом для роботи з глобальним станом**.

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

**Pinia - це спосіб зберігати спільні дані застосунку (користувач, кошик, налаштування) і використовувати їх у будь-якому компоненті.**

---

## Навіщо потрібна Pinia?

Коли застосунок росте, стає незручно прокидувати дані через props або тримати їх в одному компоненті.
Наприклад:

- авторизація користувача
- кошик товарів
- налаштування теми
- список категорій
- глобальні сповіщення

Ці дані потрібні різним частинам застосунку → отже, їх потрібно зберігати **глобально** → у **Pinia**.

---

## Основні переваги Pinia

### 1) Простота API

Pinia легша за Vuex:

- немає величезних шаблонів коду
- немає обов'язкових mutations
- мінімум церемоній
- логіка пишеться на чистому JavaScript

---

### 2) Повна типізація з коробки (TypeScript)

Pinia створена з урахуванням TS, все типізується автоматично.

---

### 3) Реактивність як у Composition API

Можна використовувати `ref` і `reactive` прямо в store.

---

### 4) Підтримка SSR, DevTools і Hot Module Reload

Дуже зручна у великих проєктах.

---

### 5) Легкий поділ на модулі

Кожен store - як окремий модуль:

```javascript
user store
cart store
products store
theme 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
    }
  }
})
```

---

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

```javascript
<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

console.log(userStore.user)

userStore.login({ name: "Tim" })
</script>
```

---

## Які сутності є в Pinia?

Pinia store складається з:

#### `state`

Сховище даних (реактивне):

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

#### `getters`

Аналог computed:

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

#### `actions`

Методи твого стора:

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

---

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

Коли:

- дані потрібні кільком компонентам
- дані мають жити між сторінками
- потрібно уникати «прокидування props через 5 рівнів»
- потрібно централізовано зберігати користувача, товари, налаштування, фільтри
- тобі потрібно кешувати API-запити

---

## Підсумок (коротко)

**Pinia - це просте, сучасне та гнучке глобальне сховище стану для Vue.js.**

Вона:

- замінює Vuex,
- працює як Composition API,
- проста, typed-friendly,
- дозволяє легко ділитися станом між компонентами.

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

Для рев’юера

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

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