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

Во Vue менеджеры состояния решают проблему передачи данных между компонентами, когда вложенность или количество компонентов становится слишком большим для пропсов и событий. Основной инструмент - Vuex (для Vue 2) или Pinia (рекомендуемый для Vue 3). Они реализуют централизованное хранилище (store) с реактивными данными.

Пример использования Pinia:

1. Создаётся store (например, userStore.js):

JAVASCRIPT
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    isLoggedIn: false
  }),
  actions: {
    login(userName) {
      this.name = userName
      this.isLoggedIn = true
    },
    logout() {
      this.name = ''
      this.isLoggedIn = false
    }
  },
  getters: {
    greeting: (state) => state.isLoggedIn ? `Привет, ${state.name}` : 'Гость'
  }
})

2. В компоненте:

<template>
  <p>{{ userStore.greeting }}</p>
  <button @click="userStore.login('Анна')">Войти</button>
</template>

<script setup>
import { useUserStore } from '@/stores/userStore'
const userStore = useUserStore()
</script>

Ключевые принципы:

• Единый источник истины: все данные хранятся в store, а не дублируются в компонентах.

• Мутации через actions: состояние изменяется только через явные методы, что упрощает отладку.

• Реактивность: изменения в store автоматически обновляют все компоненты, которые его используют.

Pinia проще и легче Vuex: не требует мутаций (actions напрямую меняют state), поддерживает TypeScript из коробки и имеет модульную структуру без вложенных модулей. Для небольших проектов часто достаточно reactive() или ref() в composables, но для средних и крупных приложений менеджер состояния обязателен.