Управление состоянием в Vue 3 с Pinia и Composition API

import { reactive } from 'vue'
 
const state = reactive({
  count: 0,
  user: { name: 'Алексей', age: 30 }
})
 
// Обе операции теперь корректно отслеживаются
state.count++
state.newProperty = 'Это будет реактивным!'

import { ref } from 'vue'
 
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1

const user = reactive({
  name: 'Мария',
  age: ref(25)
})
 
console.log(user.age) // 25, а не ref-объект

import { ref, watchEffect } from 'vue'
 
const count = ref(0)
const message = ref('')
 
watchEffect(() => {
  message.value = `Счетчик сейчас: ${count.value}`
  // Эта функция перезапустится автоматически при изменении count
})

import { ref } from 'vue'
 
const counter = ref(0)             // число
const userName = ref('Анна')       // строка
const isActive = ref(false)        // булево значение
const userList = ref([])           // массив
const profile = ref({ id: 1 })     // объект

console.log(counter.value)        // 0
counter.value++                   // увеличиваем значение
console.log(counter.value)        // 1
 
// Работа с объектами внутри ref
profile.value.name = 'Иван'       // добавление нового свойства
console.log(profile.value.name)   // 'Иван'

import { reactive } from 'vue'
 
const user = reactive({ 
  name: 'Пётр',
  age: 28,
  address: {
    city: 'Москва',
    street: 'Ленина'
  }
})
 
// Прямой доступ без .value
console.log(user.name)           // 'Пётр'
user.age = 29                    // изменение свойства
user.isAdmin = true              // добавление нового свойства

const user = reactive({ name: 'Алексей' })
// Это НЕ сработает - реактивность будет потеряна!
user = reactive({ name: 'Сергей' }) // Ошибка при использовании const или потеря реактивности при let
 
// А с ref это работает
let userRef = ref({ name: 'Алексей' })
// Реактивность сохраняется
userRef.value = { name: 'Сергей' }

const formData = reactive({
  username: ref(''),
  email: ref(''),
  password: ref('')
})
 
// Обратите внимание, что в реактивном объекте ref автоматически разворачивается
console.log(formData.username) // доступ без .value

const user = reactive({ name: 'Анна', age: 25 })
 
// Это разрушит реактивность!
const { name, age } = user
console.log(name) // 'Анна', но изменения user.name не отразятся здесь

import { reactive, toRefs } from 'vue'
 
const user = reactive({ name: 'Анна', age: 25 })
 
// Сохраняем реактивность
const { name, age } = toRefs(user)
 
// Теперь name.value и user.name связаны
name.value = 'Мария'
console.log(user.name) // 'Мария'

import { ref, computed } from 'vue'
 
const firstName = ref('Иван')
const lastName = ref('Петров')
 
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})
 
console.log(fullName.value) // 'Иван Петров'
firstName.value = 'Сергей'
console.log(fullName.value) // 'Сергей Петров'

import { shallowRef } from 'vue'
 
// Только сам объект реактивен, его внутренние свойства — нет
const user = shallowRef({ name: 'Дмитрий', address: { city: 'Казань' } })
 
// Это вызовет обновление (заменяем весь объект)
user.value = { name: 'Виктор', address: { city: 'Самара' } }
 
// Это НЕ вызовет обновления (внутреннее свойство не отслеживается)
user.value.address.city = 'Новосибирск'

export default {
  data() {
    return {
      counter: 0,
      userName: 'Гость',
      products: []
    }
  },
  computed: {
    doubleCounter() {
      return this.counter * 2
    }
  },
  methods: {
    increment() {
      this.counter++
    },
    loadProducts() {
      // Загрузка продуктов
    }
  }
}

import { ref, computed } from 'vue'
 
export default {
  setup() {
    // Вся логика счетчика вместе
    const counter = ref(0)
    const doubleCounter = computed(() => counter.value * 2)
    function increment() {
      counter.value++
    }
    
    // Другая логика может быть сгруппирована отдельно
    const userName = ref('Гость')
    const products = ref([])
    function loadProducts() {
      // Загрузка продуктов
    }
    
    return {
      counter,
      doubleCounter,
      increment,
      userName,
      products,
      loadProducts
    }
  }
}

// useCounter.js
import { ref, computed } from 'vue'
 
export function useCounter(initialValue = 0, step = 1) {
  const count = ref(initialValue)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value += step
  }
  
  return {
    count,
    doubleCount,
    increment
  }
}
 
// Использование в компоненте
import { useCounter } from './useCounter'
 
export default {
  setup() {
    // Можно создать несколько счетчиков с разными параметрами
    const { count: firstCounter, increment: incrementFirst } = useCounter(0, 1) 
    const { count: secondCounter, increment: incrementSecond } = useCounter(10, 5)
    
    return {
      firstCounter,
      incrementFirst,
      secondCounter,
      incrementSecond
    }
  }
}

async function fetchUserData(userId) {
  // Здесь мы явно видим, что функция работает с userData 
  // Нет неявной привязки к this
  userData.value = await api.getUser(userId)
}

// useCounter.spec.js
import { useCounter } from './useCounter'
 
test('should increment counter', () => {
  const { count, increment } = useCounter(0)
  expect(count.value).toBe(0)
  increment()
  expect(count.value).toBe(1)
})

import { defineStore } from 'pinia'
 
export const useTaskStore = defineStore('tasks', {
  state: () => ({
    tasks: [],
    loading: false
  }),
  
  getters: {
    completedTasks: (state) => state.tasks.filter(task => task.completed),
    incompleteTasks: (state) => state.tasks.filter(task => !task.completed),
    totalCount: (state) => state.tasks.length
  },
  
  actions: {
    async fetchTasks() {
      this.loading = true
      try {
        // В Pinia можно напрямую изменять состояние внутри actions
        this.tasks = await api.getTasks()
      } finally {
        this.loading = false
      }
    },
    
    addTask(title) {
      const newTask = {
        id: Date.now(),
        title,
        completed: false
      }
      this.tasks.push(newTask)
    }
  }
})

// Использование нескольких хранилищ вместе
import { useUserStore } from './stores/user'
import { useCartStore } from './stores/cart'
 
export default {
  setup() {
    const userStore = useUserStore()
    const cartStore = useCartStore()
    
    // Теперь можно использовать оба хранилища
    return {
      user: userStore,
      cart: cartStore
    }
  }
}

// Пример плагина для Pinia, сохраняющего состояние в localStorage
function localStoragePlugin({ store }) {
  // Загружаем начальное состояние из localStorage
  const saved = localStorage.getItem(store.$id)
  if (saved) {
    store.$state = JSON.parse(saved)
  }
  
  // Сохраняем изменения в localStorage
  store.$subscribe((_, state) => {
    localStorage.setItem(store.$id, JSON.stringify(state))
  })
}
 
// Применение плагина
const pinia = createPinia()
pinia.use(localStoragePlugin)
app.use(pinia)

// Composition API
setup() {
  const store = useStore()
  return { 
    counter: store.counter,
    doubleCount: store.doubleCount,
    increment: store.increment
  }
}
 
// Options API
computed: {
  ...mapState(useStore, ['counter']),
  ...mapGetters(useStore, ['doubleCount'])
},
methods: {
  ...mapActions(useStore, ['increment'])
}

import { useUserStore } from './user'
 
export const useCartStore = defineStore('cart', {
  actions: {
    checkout() {
      const userStore = useUserStore()
      if (!userStore.isLoggedIn) {
        throw new Error('Пользователь должен быть авторизован')
      }
      // Продолжить оформление заказа
    }
  }
})

// use-authentication.js
import { useUserStore } from '@/stores/user'
import { computed } from 'vue'
 
export function useAuthentication() {
  const userStore = useUserStore()
  
  const isLoggedIn = computed(() => !!userStore.currentUser)
  const username = computed(() => userStore.currentUser?.name || 'Гость')
  
  async function login(credentials) {
    return userStore.login(credentials)
  }
  
  function logout() {
    userStore.logout()
  }
  
  return {
    isLoggedIn,
    username,
    login,
    logout
  }
}

import { defineStore } from 'pinia'
 
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Счетчик'
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

<script setup>
import { useCounterStore } from '@/stores/counter'
 
const counterStore = useCounterStore()
 
// Теперь можно обращаться к состоянию, геттерам и действиям
console.log(counterStore.count)
console.log(counterStore.doubleCount)
counterStore.increment()
</script>
 
<template>
  <div>
    <p>Счетчик: {{ counterStore.count }}</p>
    <p>Удвоенное значение: {{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment">Увеличить</button>
  </div>
</template>

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
 
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Счетчик')
  
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  return { count, name, doubleCount, increment }
})

import { defineStore } from 'pinia'
import { useUserStore } from './user'
 
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
    isCheckingOut: false
  }),
  actions: {
    async checkout() {
      const userStore = useUserStore()
      
      if (!userStore.isLoggedIn) {
        return { success: false, error: 'Пожалуйста, войдите в систему' }
      }
      
      this.isCheckingOut = true
      try {
        // Логика оформления заказа
        return { success: true }
      } finally {
        this.isCheckingOut = false
      }
    }
  }
})

const counterStore = useCounterStore()
counterStore.count = 10
// Позже, когда нужно сбросить состояние
counterStore.$reset() // count вернётся к 0

const unsubscribe = counterStore.$subscribe((mutation, state) => {
  // Срабатывает при каждом изменении состояния
  console.log('Изменение', mutation)
  console.log('Текущее состояние', state)
  
  // Можно сохранять состояние в localStorage
  localStorage.setItem('counter', JSON.stringify(state))
})
 
// Отписка вручную, если необходимо
unsubscribe()

counterStore.$onAction(({
  name, // Имя действия
  args, // Массив аргументов
  after, // Хук, вызываемый после действия
  onError // Хук, вызываемый при ошибке
}) => {
  console.log(`Вызвано действие ${name} с аргументами:`, args)
  
  after((result) => {
    console.log(`Действие ${name} завершено с результатом:`, result)
  })
  
  onError((error) => {
    console.error(`Действие ${name} завершилось с ошибкой:`, error)
  })
})

import { storeToRefs } from 'pinia'
 
const counterStore = useCounterStore()
// Не работает, реактивность потеряна
// const { count, doubleCount } = counterStore
 
// Это работает, сохраняя реактивность
const { count, doubleCount } = storeToRefs(counterStore)
// Обратите внимание: действия не являются реактивными свойствами
const { increment } = counterStore

import { mapState, mapActions, mapStores } from 'pinia'
 
export default {
  computed: {
    // Доступ к хранилищу целиком
    ...mapStores(useCounterStore),
    
    // Получение конкретных свойств состояния
    ...mapState(useCounterStore, ['count', 'doubleCount']),
    
    // С использованием псевдонимов
    ...mapState(useCounterStore, {
      myCount: 'count',
      myDoubleCount: (store) => store.doubleCount * 2
    })
  },
  methods: {
    ...mapActions(useCounterStore, ['increment'])
  }
}

import { defineStore } from 'pinia'
 
export const useProductStore = defineStore('products', {
  state: () => ({
    products: [],
    loading: false,
    error: null
  }),
  actions: {
    async fetchProducts() {
      this.loading = true
      this.error = null
      
      try {
        const response = await fetch('/api/products')
        this.products = await response.json()
      } catch (err) {
        this.error = err.message
        console.error('Ошибка при загрузке продуктов:', err)
      } finally {
        this.loading = false
      }
    }
  }
})

// Обычный импорт
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
 
// Ленивый импорт при необходимости
const router = createRouter({
  routes: [
    {
      path: '/admin',
      component: AdminPanel,
      beforeEnter: async (to, from) => {
        const userStore = (await import('@/stores/user')).useUserStore()
        if (!userStore.isAdmin) return '/login'
      }
    }
  ]
})

npm install pinia
# или
yarn add pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import store from './store' // Существующий Vuex store
 
const app = createApp(App)
 
// Одновременно подключаем и Vuex, и Pinia для постепенной миграции
app.use(store) // Vuex
app.use(createPinia()) // Pinia
 
app.mount('#app')

// Vuex модуль: store/modules/todo.js
export default {
  namespaced: true,
  
  state: {
    items: [],
    loading: false
  },
  
  getters: {
    completedTodos: (state) => state.items.filter(item => item.completed),
    totalCount: (state) => state.items.length
  },
  
  mutations: {
    SET_TODOS(state, todos) {
      state.items = todos
    },
    SET_LOADING(state, value) {
      state.loading = value
    },
    ADD_TODO(state, todo) {
      state.items.push(todo)
    }
  },
  
  actions: {
    async fetchTodos({ commit }) {
      commit('SET_LOADING', true)
      try {
        const response = await fetch('/api/todos')
        const todos = await response.json()
        commit('SET_TODOS', todos)
      } finally {
        commit('SET_LOADING', false)
      }
    },
    addTodo({ commit }, title) {
      const todo = {
        id: Date.now(),
        title,
        completed: false
      }
      commit('ADD_TODO', todo)
    }
  }
}

// Pinia store: stores/todo.js
import { defineStore } from 'pinia'
 
export const useTodoStore = defineStore('todo', {
  state: () => ({
    items: [],
    loading: false
  }),
  
  getters: {
    completedTodos: (state) => state.items.filter(item => item.completed),
    totalCount: (state) => state.items.length
  },
  
  actions: {
    async fetchTodos() {
      this.loading = true
      try {
        const response = await fetch('/api/todos')
        this.items = await response.json()
      } finally {
        this.loading = false
      }
    },
    
    addTodo(title) {
      const todo = {
        id: Date.now(),
        title,
        completed: false
      }
      this.items.push(todo)
    }
  }
})

// Vuex в Options API
export default {
  computed: {
    ...mapState('todo', ['items', 'loading']),
    ...mapGetters('todo', ['completedTodos', 'totalCount'])
  },
  methods: {
    ...mapActions('todo', ['fetchTodos', 'addTodo'])
  },
  mounted() {
    this.fetchTodos()
  }
}

// Pinia с Options API
import { useTodoStore } from '@/stores/todo'
import { mapState, mapActions } from 'pinia'
 
export default {
  computed: {
    ...mapState(useTodoStore, ['items', 'loading', 'completedTodos', 'totalCount'])
  },
  methods: {
    ...mapActions(useTodoStore, ['fetchTodos', 'addTodo'])
  },
  mounted() {
    this.fetchTodos()
  }
}
 
// ИЛИ с Composition API
import { useTodoStore } from '@/stores/todo'
 
export default {
  setup() {
    const todoStore = useTodoStore()
    
    // Деструктуризация с сохранением реактивности
    const { items, loading, completedTodos, totalCount } = storeToRefs(todoStore)
    
    onMounted(() => {
      todoStore.fetchTodos()
    })
    
    return {
      items,
      loading,
      completedTodos,
      totalCount,
      addTodo: todoStore.addTodo
    }
  }
}

// stores/user.js
export const useUserStore = defineStore('user', {
  // состояние и методы пользователя
})
 
// stores/products.js
export const useProductsStore = defineStore('products', {
  // каталог товаров, фильтры, сортировка
})
 
// stores/cart.js
export const useCartStore = defineStore('cart', {
  // корзина покупок
})
 
// stores/orders.js
export const useOrdersStore = defineStore('orders', {
  // заказы пользователя
})

import { defineStore } from 'pinia'
import { useUserStore } from './user'
import { useProductsStore } from './products'
 
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [],
    couponCode: null
  }),
  
  actions: {
    async checkout() {
      const userStore = useUserStore()
      
      if (!userStore.isLoggedIn) {
        // Перенаправить на страницу логина
        return false
      }
      
      // Создаём заказ на основе данных корзины и пользователя
      const orderData = {
        items: this.items,
        userId: userStore.id,
        shippingAddress: userStore.defaultAddress,
        coupon: this.couponCode
      }
      
      // Отправка запроса и дальнейшая обработка
      // ...
      
      // После успешного оформления заказа очищаем корзину
      this.items = []
      this.couponCode = null
      
      return true
    },
    
    addProductById(productId, quantity = 1) {
      const productsStore = useProductsStore()
      const product = productsStore.getProductById(productId)
      
      if (!product) return false
      
      // Проверяем, есть ли товар уже в корзине
      const existingItem = this.items.find(item => item.id === productId)
      
      if (existingItem) {
        existingItem.quantity += quantity
      } else {
        this.items.push({
          id: product.id,
          name: product.name,
          price: product.price,
          quantity
        })
      }
      
      return true
    }
  },
  
  getters: {
    totalAmount: (state) => {
      return state.items.reduce((total, item) => total + (item.price * item.quantity), 0)
    },
    
    itemsCount: (state) => {
      return state.items.reduce((count, item) => count + item.quantity, 0)
    }
  }
})

// stores/api/users.js
export const useUsersApiStore = defineStore('users-api', {
  actions: {
    async fetchUser(id) {
      return fetch(`/api/users/${id}`).then(r => r.json())
    },
    async updateUser(id, data) {
      // Логика запроса к API
    }
  }
})
 
// stores/user.js - хранилище уровня приложения использует API-хранилище
export const useUserStore = defineStore('user', {
  state: () => ({
    currentUser: null,
    loading: false,
    error: null
  }),
  
  actions: {
    async loadCurrentUser() {
      const apiStore = useUsersApiStore()
      this.loading = true
      
      try {
        this.currentUser = await apiStore.fetchUser('me')
        this.error = null
      } catch (err) {
        this.error = 'Не удалось загрузить данные пользователя'
        console.error(err)
      } finally {
        this.loading = false
      }
    }
  }
})

// composables/useCheckout.js
import { ref, computed } from 'vue'
import { useCartStore } from '@/stores/cart'
import { useUserStore } from '@/stores/user'
import { useOrdersStore } from '@/stores/orders'
 
export function useCheckout() {
  const cartStore = useCartStore()
  const userStore = useUserStore()
  const ordersStore = useOrdersStore()
  
  const isProcessing = ref(false)
  const error = ref(null)
  
  const canCheckout = computed(() => 
    userStore.isLoggedIn && 
    cartStore.items.length > 0 && 
    !isProcessing.value
  )
  
  async function processCheckout() {
    if (!canCheckout.value) return false
    
    isProcessing.value = true
    error.value = null
    
    try {
      // Оформление заказа с использованием всех необходимых хранилищ
      const orderData = await cartStore.prepareOrderData()
      const newOrder = await ordersStore.createOrder(orderData)
      await cartStore.clearCart()
      
      return newOrder
    } catch (err) {
      error.value = 'Не удалось оформить заказ'
      return false
    } finally {
      isProcessing.value = false
    }
  }
  
  return {
    isProcessing,
    error,
    canCheckout,
    processCheckout
  }
}

// Динамический импорт хранилища для админской панели
async function loadAdminPanel() {
  const { useAdminStore } = await import('@/stores/admin')
  const adminStore = useAdminStore()
  await adminStore.loadDashboardData()
  
  // Дальнейшая логика
}

// stores/auth.js
import { defineStore } from 'pinia'
import router from '@/router'
 
export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    token: localStorage.getItem('auth_token') || null,
    loading: false,
    error: null
  }),
  
  getters: {
    isAuthenticated: (state) => !!state.token && !!state.user,
    userRole: (state) => state.user?.role || 'guest'
  },
  
  actions: {
    async login(credentials) {
      this.loading = true
      this.error = null
      
      try {
        // Имитация API-запроса
        const response = await fetch('/api/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(credentials)
        })
        
        const data = await response.json()
        
        if (!response.ok) {
          throw new Error(data.message || 'Ошибка аутентификации')
        }
        
        this.user = data.user
        this.token = data.token
        
        // Сохраняем токен в localStorage для персистентности
        localStorage.setItem('auth_token', data.token)
        
        // Перенаправляем на защищенную страницу
        router.push({ name: 'dashboard' })
        
        return true
      } catch (error) {
        this.error = error.message
        return false
      } finally {
        this.loading = false
      }
    },
    
    async logout() {
      // Можно добавить запрос к API для инвалидации токена на сервере
      this.user = null
      this.token = null
      localStorage.removeItem('auth_token')
      
      // Перенаправляем на страницу входа
      router.push({ name: 'login' })
    },
    
    async checkAuth() {
      if (!this.token) return false
      
      this.loading = true
      
      try {
        // Запрос для проверки токена и получения данных пользователя
        const response = await fetch('/api/me', {
          headers: { 'Authorization': [INLINE]Bearer ${this.token}[/INLINE] }
        })
        
        if (!response.ok) {
          throw new Error('Сессия истекла')
        }
        
        const data = await response.json()
        this.user = data.user
        
        return true
      } catch (error) {
        this.user = null
        this.token = null
        localStorage.removeItem('auth_token')
        this.error = 'Сессия истекла, пожалуйста, войдите снова'
        
        return false
      } finally {
        this.loading = false
      }
    }
  }
})

<template>
  <form @submit.prevent="handleLogin" class="login-form">
    <div v-if="authStore.error" class="error-message">
      {{ authStore.error }}
    </div>
    
    <input v-model="email" type="email" placeholder="Email" required />
    <input v-model="password" type="password" placeholder="Пароль" required />
    
    <button type="submit" :disabled="authStore.loading">
      {{ authStore.loading ? 'Вход...' : 'Войти' }}
    </button>
  </form>
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
 
const authStore = useAuthStore()
const email = ref('')
const password = ref('')
 
async function handleLogin() {
  await authStore.login({ email: email.value, password: password.value })
}
 
onMounted(() => {
  // Проверяем авторизацию при загрузке компонента
  authStore.checkAuth()
})
</script>

// stores/notifications.js
import { defineStore } from 'pinia'
 
export const useNotificationStore = defineStore('notifications', {
  state: () => ({
    notifications: []
  }),
  
  actions: {
    add(notification) {
      // Создаём уникальный id для уведомления
      const id = Date.now().toString()
      
      // Добавляем уведомление в массив
      this.notifications.push({
        id,
        message: notification.message,
        type: notification.type || 'info',
        timeout: notification.timeout || 3000,
        ...notification
      })
      
      // Автоматически удаляем уведомление через timeout
      if (notification.timeout !== 0) {
        setTimeout(() => {
          this.remove(id)
        }, notification.timeout || 3000)
      }
      
      return id
    },
    
    remove(id) {
      const index = this.notifications.findIndex(n => n.id === id)
      if (index !== -1) {
        this.notifications.splice(index, 1)
      }
    },
    
    // Вспомогательные методы для разных типов уведомлений
    success(message, options = {}) {
      return this.add({ message, type: 'success', ...options })
    },
    
    error(message, options = {}) {
      return this.add({ message, type: 'error', ...options })
    },
    
    warning(message, options = {}) {
      return this.add({ message, type: 'warning', ...options })
    },
    
    info(message, options = {}) {
      return this.add({ message, type: 'info', ...options })
    },
    
    clearAll() {
      this.notifications = []
    }
  }
})

<!-- NotificationsContainer.vue -->
<template>
  <div class="notifications-container">
    <transition-group name="notification">
      <div
        v-for="notification in notificationStore.notifications"
        :key="notification.id"
        :class="['notification', notification.type]"
      >
        <button class="close" @click="notificationStore.remove(notification.id)">×</button>
        <div class="message">{{ notification.message }}</div>
      </div>
    </transition-group>
  </div>
</template>
 
<script setup>
import { useNotificationStore } from '@/stores/notifications'
 
const notificationStore = useNotificationStore()
</script>

// stores/entities.js
import { defineStore } from 'pinia'
 
export const useEntityStore = defineStore('entities', {
  state: () => ({
    entities: {},
    loading: {},
    errors: {}
  }),
  
  actions: {
    setLoading(entityType, isLoading) {
      this.loading[entityType] = isLoading
    },
    
    setError(entityType, error) {
      this.errors[entityType] = error
    },
    
    setEntities(entityType, entities) {
      // Создаём объект для хранения сущностей по id
      const normalized = {}
      entities.forEach(entity => {
        normalized[entity.id] = entity
      })
      
      // Обновляем хранилище
      this.entities[entityType] = normalized
    },
    
    addEntity(entityType, entity) {
      if (!this.entities[entityType]) {
        this.entities[entityType] = {}
      }
      
      this.entities[entityType][entity.id] = entity
    },
    
    updateEntity(entityType, entityId, updates) {
      if (this.entities[entityType] && this.entities[entityType][entityId]) {
        this.entities[entityType][entityId] = {
          ...this.entities[entityType][entityId],
          ...updates
        }
      }
    },
    
    removeEntity(entityType, entityId) {
      if (this.entities[entityType] && this.entities[entityType][entityId]) {
        delete this.entities[entityType][entityId]
      }
    }
  },
  
  getters: {
    getEntitiesByType: (state) => (entityType) => {
      return Object.values(state.entities[entityType] || {})
    },
    
    getEntityById: (state) => (entityType, id) => {
      return state.entities[entityType]?.[id] || null
    },
    
    isLoading: (state) => (entityType) => {
      return !!state.loading[entityType]
    },
    
    getError: (state) => (entityType) => {
      return state.errors[entityType]
    }
  }
})

// state.js
import { reactive } from 'vue'
 
export const state = reactive({
  count: 0,
  users: [],
  isLoading: false
})

import { state } from './state'
 
export default {
  setup() {
    function increment() {
      state.count++
    }
    
    return { state, increment }
  }
}

// В родительском компоненте
import { provide, reactive } from 'vue'
 
export default {
  setup() {
    const state = reactive({
      theme: 'light',
      fontSize: 16
    })
    
    function toggleTheme() {
      state.theme = state.theme === 'light' ? 'dark' : 'light'
    }
    
    // Предоставляем и состояние, и методы для его изменения
    provide('appSettings', { state, toggleTheme })
    
    return { state, toggleTheme }
  }
}
 
// В любом дочернем компоненте
import { inject } from 'vue'
 
export default {
  setup() {
    const { state, toggleTheme } = inject('appSettings')
    
    return { state, toggleTheme }
  }
}

// useStore.js
import { reactive, readonly } from 'vue'
 
export function createStore(options) {
  const state = reactive(options.state())
  
  const store = {
    state: readonly(state),
    
    // Аналог геттеров
    getters: {},
    
    // Аналог действий
    dispatch(action, payload) {
      if (!options.actions || !options.actions[action]) {
        console.error(`Действие "${action}" не определено`)
        return
      }
      
      return options.actions[action](state, payload)
    }
  }
  
  // Инициализация геттеров
  if (options.getters) {
    Object.keys(options.getters).forEach(name => {
      Object.defineProperty(store.getters, name, {
        get: () => options.getters[name](state)
      })
    })
  }
  
  return store
}
 
// Использование
const counterStore = createStore({
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: state => state.count * 2
  },
  actions: {
    increment(state, amount = 1) {
      state.count += amount
    }
  }
})

// eventBus.js
import { ref, watchEffect } from 'vue'
 
export const createEventBus = () => {
  const listeners = ref({})
  const state = ref({})
  
  const emit = (event, payload) => {
    if (listeners.value[event]) {
      listeners.value[event].forEach(callback => callback(payload))
    }
  }
  
  const on = (event, callback) => {
    if (!listeners.value[event]) {
      listeners.value[event] = []
    }
    
    listeners.value[event].push(callback)
    
    // Возвращаем функцию отписки
    return () => {
      listeners.value[event] = listeners.value[event].filter(
        cb => cb !== callback
      )
    }
  }
  
  const setState = (key, value) => {
    state.value[key] = value
    emit(`state:${key}`, value)
  }
  
  const getState = (key) => state.value[key]
  
  return { emit, on, setState, getState, state }
}