Local VS Global state

VueJunior~1 хв читання

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
Локальне живе з компонентом
Глобальне живе весь час

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

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

Premium

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