Skip to main content

Що таке стан (state) у контексті Vue.js?

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

Стан (state) у контексті Vue.js - це дані, які зберігаються всередині компонента чи застосунку і можуть змінюватися з часом, викликаючи перемальовування інтерфейсу.

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

  • State - це те, що впливає на те, що користувач бачить на екрані.
  • Коли state змінюється - змінюється UI.

Де зберігається стан?

У Vue 3 стан найчастіше створюється за допомогою reactive() або ref():

javascript
<script setup> import { ref } from 'vue' // це стан const count = ref(0) </script>

count - це state. Коли count.value зміниться - Vue автоматично оновить інтерфейс.

Приклад: стан у компоненті

javascript
<template> <button @click="count++"> Count: {{ count }} </button> </template> <script setup> import { ref } from 'vue' const count = ref(0) // <- стан компонента </script>

UI оновиться щоразу, коли ми змінюємо count.

Чому стан важливий?

Тому що UI залежить від даних.

Наприклад:

  • чи відкрите модальне вікно
  • текст, введений у форму
  • яка вкладка обрана
  • список товарів у кошику
  • дані, отримані з API
  • поточний користувач

Усе це - state.

Як Vue реагує на зміни стану?

Vue використовує реактивність: він відстежує, які дані використовуються в шаблоні чи обчисленнях.

Коли ти змінюєш state:

javascript
count.value++

Vue:

  1. фіксує зміну
  2. обчислює, які частини UI зачеплені
  3. перемальовує лише потрібні компоненти

Це робить застосунок швидким.

Види стану у Vue

1) Локальний стан

Зберігається в компоненті.

Приклад: стан модалки, інпута, лічильника.

javascript
const isOpen = ref(false)

2) Глобальний стан

Використовується в усьому застосунку.

Зберігається в:

  • Pinia
  • старих проєктах - Vuex

Приклад: стан авторизації, кошик, налаштування користувача.

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

Стан із props

Іноді стан передається зверху вниз батьком:

javascript
<ChildComponent :title="pageTitle" />

Тут pageTitle - теж state батька.

State + UI: простий приклад

javascript
<template> <input v-model="name" placeholder="Введіть ім'я" /> <p>Привіт, {{ name }}!</p> </template> <script setup> import { ref } from 'vue' const name = ref('') // стан </script>

Змінюємо name -> Vue оновлює відображення тексту.

Що НЕ є станом?

  • Константи
  • імпортовані дані
  • обчислювані властивості (вони залежать від стану, але самі state не зберігають)
  • props усередині батька (вони стають state у дитині лише якщо обробляються локально)

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

Стан (state) у Vue - це змінювані дані, від яких залежить UI. Коли state змінюється - Vue автоматично оновлює інтерфейс.

State буває:

  • локальним (усередині компонента),
  • глобальним (Pinia/Vuex),
  • переданим через props.

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

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

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

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