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

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

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

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

Контент

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

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

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

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

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

## Коротко:

- **Локальний стан** → належить конкретному компоненту, використовується лише в ньому.
- **Глобальний стан** → зберігається в центрі застосунку (store) і використовується багатьма компонентами.

---

## Локальний стан компонента

Це дані, які стосуються **лише одного компонента**.

Наприклад:

```js
data() {
  return {
    isOpen: false,
    searchQuery: '',
    form: { name: '', email: '' }
  }
}
```

Або в Composition API:

```js
const isOpen = ref(false)
```

#### Характеристики локального стану:

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

#### Приклади локального стану:

- стан модалки (open/close)
- текст пошуку в інпуті
- стан форми
- обрана вкладка в поточному компоненті
- локальні прапорці (`loading`, `error`)

---

## Глобальний стан

Це дані, які потрібні **кільком компонентам або всьому застосунку**.
Зазвичай зберігаються в менеджері стану:

- Vuex
- Pinia

Або через `provide/inject`.

#### Приклади глобального стану:

- поточний користувач
- токен авторизації
- кошик товарів
- список товарів, завантажений один раз
- налаштування застосунку (тема, мова)
- сповіщення
- стан меню/сайдбара
- web-socket дані

---

#### Характеристики глобального стану:

- доступний усім компонентам
- зберігається поза компонентом (store)
- існує весь час життя застосунку
- використовується в кількох модулях
- змінюється централізовано
- впливає на роботу всього застосунку

---

## Приклади відмінностей (інтуїтивно)

### Приклад 1: кошик товарів

- Локальний стан: чи відкрита модалка "Кошик"
- Глобальний стан: список товарів у кошику

### Приклад 2: форма профілю

- Локальний стан: поточний вміст інпутів
- Глобальний стан: інформація про користувача

### Приклад 3: теми (light/dark)

- Локальне: яка кнопка натиснута в компоненті
- Глобальне: поточна тема застосунку

---

## Як зрозуміти, чи потрібно розміщувати стан у store?

Поставте одне запитання:

#### "Чи потрібен стан більш ніж одному компоненту?"

- **ТАК → глобальний стан (store)**
- **НІ → локальний**

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

Для рев’юера

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

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