Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке стан (state) у контексті Vue.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Стан (state)** у контексті Vue.js - це **дані**, які зберігаються всередині компонента чи застосунку і **можуть змінюватися з часом**, викликаючи **перемальовування інтерфейсу**. **Ключове:** state - це те, що впливає на те, що користувач бачить на екрані; коли state змінюється, змінюється UI.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Стан (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.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.