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

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

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

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

Контент

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

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

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

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

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

**Менеджер стану (state manager)** - це інструмент або бібліотека, яка відповідає за **зберігання**, **зміну** та **синхронізацію спільного стану** застосунку між різними компонентами.

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

> **Менеджер стану - це централізоване сховище даних, до якого можуть звертатися всі компоненти, щоб отримувати або змінювати спільний стан.**

У контексті Vue такими менеджерами є:

- **Vuex** (Vue 2 / Vue 3, класичний підхід)
- **Pinia** (рекомендований менеджер стану для Vue 3)

---

## Навіщо взагалі потрібен менеджер стану?

Коли застосунок маленький - достатньо props/emits.
Але коли він росте, з'являються проблеми:

#### 1. «Props drilling»

Дані доводиться проштовхувати через багато компонентів.

#### 2. Складно передавати дані «вгору»

Emit працює тільки від дочірнього до батьківського.

#### 3. Кілька компонентів використовують ту саму логіку

Наприклад:

- авторизація
- кошик товарів
- налаштування користувача
- фільтри
- тема (dark/light)

#### 4. Стан розрізнений

Незрозуміло, хто і де змінює дані.

---

## Що дає менеджер стану?

### 1. Єдине сховище (central store)

Усі дані - в одному місці.

### 2. Передбачуваність

Усі зміни підпорядковані певним правилам (actions, mutations).

### 3. Спільні дані доступні всім компонентам

Не потрібно прокидувати props.

### 4. Легко дебажити

Є devtools → видно історію змін.

### 5. Спрощує великі застосунки

Розділення на модулі та під-сховища.

---

## Приклад менеджера стану (Pinia)

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

export const useCounter = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})
```

Використання:

```js
const counter = useCounter()
counter.increment()
console.log(counter.count)
```

---

## Приклад менеджера стану (Vuex)

```js
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})
```

---

## Коли менеджер стану обов'язковий?

- авторизація/поточний користувач
- кошик товарів
- глобальні налаштування
- кілька компонентів мають читати/змінювати одні й ті самі дані
- складна логіка фільтрів
- чати, сповіщення, real-time дані
- великі SPA

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

Для рев’юера

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

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