> Как используются менеджеры состояния во Vue (Vue.js)

Короткий ответ

Менеджеры состояния во Vue решают проблему разделения данных между компонентами, когда props и events становятся неудобными. Основные подходы: Vuex (централизованное хранилище с мутациями и actions), Pinia (современная замена Vuex с TypeScript-first подходом и упрощённым API), composables (через provide/inject или глобальные reactive-объекты). Выбор зависит от сложности приложения: для небольших проектов достаточно composables, для крупных - Pinia.

Подробное объяснение

Во Vue управление состоянием эволюционировало от простого reactive-объекта до полноценных библиотек. Основная проблема - "prop drilling" и необходимость синхронизации данных между несвязанными компонентами.

Vuex - классический паттерн Flux: state (реактивные данные), getters (вычисляемые свойства), mutations (синхронные изменения), actions (асинхронные операции). Мутации - единственный способ изменить state, что делает изменения предсказуемыми и отслеживаемыми через devtools.

Pinia - более современный подход, рекомендованный командой Vue. Отличия: нет mutations (только actions), полная поддержка TypeScript, модульная структура без вложенности, поддержка Composition API из коробки. Каждый store - это отдельный composable с state, getters и actions.

Composables - нативный способ через Composition API. Можно создать глобальный reactive-объект и импортировать его в компоненты. Для иерархии компонентов используется provide/inject. Подходит для простых сценариев, но теряет преимущества devtools и строгой архитектуры.

Reactivity API - самый низкоуровневый подход: reactive(), ref(), computed(). Используется внутри composables или напрямую, если состояние очень локальное.

На практике

Выбор менеджера состояния зависит от масштаба и требований:

• Маленькие проекты (< 5 страниц): composables с provide/inject или простой reactive-объект. Минимум бойлерплейта.
• Средние проекты (5-20 страниц): Pinia - оптимальный баланс между простотой и структурой.
• Крупные проекты (> 20 страниц, несколько команд): Pinia с модулями, строгими типами и middleware для логирования.
• Legacy-проекты: Vuex, если уже используется, но миграция на Pinia рекомендуется.

Важные практические моменты:

• Server state (данные с API) лучше выносить в отдельный слой (React Query, SWR, TanStack Query) - они управляют кэшированием, ревалидацией и статусами загрузки.
• Form state - не хранить в глобальном store, использовать локальные composables (например, VeeValidate).
• URL state - синхронизировать с vue-router через query params.
• Persist state - через плагины (pinia-plugin-persistedstate) или localStorage вручную.

Пример кода

JAVASCRIPT
// Pinia store (рекомендуемый подход)
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    role: 'guest',
    permissions: []
  }),
  getters: {
    isAdmin: (state) => state.role === 'admin',
    canEdit: (state) => state.permissions.includes('edit')
  },
  actions: {
    async login(credentials) {
      const user = await api.login(credentials)
      this.name = user.name
      this.role = user.role
      this.permissions = user.permissions
    },
    logout() {
      this.$reset()
    }
  }
})

// Использование в компоненте
<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const { isAdmin, canEdit } = storeToRefs(userStore)

function handleLogin() {
  userStore.login({ email, password })
}
</script>

Как отвечать на собеседовании

Начни с краткого определения проблемы, которую решают менеджеры состояния. Затем сравни Vuex и Pinia, подчеркнув эволюцию и причины перехода. Упомяни, что для server state нужны отдельные решения. Покажи понимание trade-off между простотой composables и строгостью Pinia. Приведи пример выбора подхода под конкретный сценарий. Закончи практическими рекомендациями по организации store в крупных проектах.

Что проверяет интервьюер

• Понимание разницы между локальным и глобальным состоянием
• Знание эволюции инструментов (Vuex → Pinia)
• Умение выбирать правильный инструмент под задачу
• Понимание реактивности Vue и как менеджеры состояния её используют
• Знание паттернов: Flux, модульность, типизация
• Осведомлённость о современных практиках (server state, form state)

Типичные ошибки

• Хранение всего подряд в одном store без модулей
• Использование Vuex в новом проекте без причины
• Отсутствие типизации в Vuex (особенно в больших проектах)
• Смешивание server state и client state в одном store
• Игнорирование provide/inject для простых случаев
• Создание store для данных, которые используются только в одном компоненте
• Забывание про $reset() в Pinia для сброса состояния