Skip to main content

Чим відрізняється локальний стан компонента від глобального?

VueJunior~1 хв читання
Запропонувати правку

Коротко:

  • Локальний стан → належить конкретному компоненту, використовується лише в ньому.
  • Глобальний стан → зберігається в центрі застосунку (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)
  • НІ → локальний

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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