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

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

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

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

Контент

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

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

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

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

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

## 1. Локальний стан (state компонента)

**Локальний стан** - це дані, які належать **конкретному компоненту** і використовуються **тільки всередині нього**.

#### Характеристики:

- видно тільки всередині компонента
- створюється через `ref()`, `reactive()` або `data()`
- кожен екземпляр компонента має свій стан
- не повинно використовуватися іншими компонентами
- живе стільки, скільки живе компонент

#### Приклад локального state

`Counter.vue`:

```javascript
<script setup>
import { ref } from 'vue'

const count = ref(0) // локальний стан
</script>

<template>
  <button @click="count++">
    Count: {{ count }}
  </button>
</template>
```

Тут `count` існує тільки в цьому компоненті.

---

## 2. Глобальний стан (shared state)

**Глобальний стан** - це дані, які повинні бути доступні **багатьом компонентам** або всьому застосунку.

Зазвичай зберігається в:

- **Pinia** (Vue 3 - сучасний стандарт)
- **Vuex** (спадщина)
- або через provide/inject (рідко)

#### Характеристики:

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

#### Приклад глобального state (Pinia)

```javascript
// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
    isLoggedIn: false
  }),
})
```

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

```javascript
<script setup>
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

console.log(userStore.user) // доступно в будь-якому місці
</script>
```

---

## Локальний vs глобальний - основні відмінності

| Критерій | Локальний стан | Глобальний стан |
|---|---|---|
| Де зберігається | Всередині компонента | В окремому сховищі (Pinia/Vuex) |
| Область видимості | Тільки компонент | Весь застосунок |
| Життєвий цикл | Живе, поки живе компонент | Живе, поки працює застосунок |
| Для чого | UI-логіка, тимчасові дані | Авторизація, кошик, налаштування |
| Доступ | Прямо в компоненті | Через store |
| Повторне використання | Ні | Так (будь-який компонент може читати/змінювати) |

---

## Як зрозуміти, куди класти state?

### Локальний стан - коли:

- модалка відкрита/закрита
- активна вкладка
- значення інпута
- стан конкретної картки
- тимчасові прапорці (`isLoading`, `isFocused`)

**Приклад:**
кнопка лайка - це локально
лічильник лайків на весь профіль - вже глобально.

---

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

- користувач авторизований?
- дані кошика
- налаштування теми (light/dark)
- список товарів, який використовується на різних сторінках
- токен авторизації
- обране, налаштування, мова

Глобальний state - це **джерела даних, важливі для різних частин застосунку**.

---

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

**Локальний стан - дані всередині компонента.**
**Глобальний стан - спільні дані застосунку, доступні багатьом компонентам.**

- Локальне створюємо через `ref()`/`reactive()`
- Глобальне створюємо в Pinia/Vuex
- Локальне живе з компонентом
- Глобальне живе весь час

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

Для рев’юера

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

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