Хранилища с Composition API во Vue.js

Хранилища с Composition API — это способ управления глобальным состоянием приложения без использования специализированных библиотек вроде Pinia или Vuex. Они основаны на реактивных переменных (ref, reactive) и функциях, объединённых в модули (composables), которые можно переиспользовать между компонентами. Этот подход позволяет инкапсулировать логику и данные, обеспечивая гибкость и минимализм

Composition API — это новый подход к созданию компонентов во Vue.js, представленный в версии Vue 3. Он предоставляет разработчикам более гибкий и мощный способ организации кода, позволяя разделять логику приложения по функциональным блокам, а не по опциям, как это было в Options API

Как это работает?

Основные концепции Composition API

Функция setup:

• Является точкой входа для использования Composition API.
• Выполняется перед созданием компонента и предоставляет доступ к props и контексту компонента.
• Возвращает данные и методы, которые будут доступны в шаблоне компонента.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};

Создание хранилища

Реактивное состояние объявляется в отдельном файле и экспортируется

• Используются функции ref() и reactive() для создания реактивных данных.
• ref() создаёт реактивное значение, а reactive() — реактивный объект

javascript// stores/counter.js 
import { ref, computed } from 'vue'; export function useCounterStore() { const count = ref(0); const double = computed(() => count.value * 2); 
function increment() { count.value++; } return { count, double, increment }; }

Использование в компонентах:
Импортируйте хранилище и используйте его реактивные данные и методы

text<script setup> import { useCounterStore } from '@/stores/counter'; const { count, double, increment } = useCounterStore(); 
</script> 
<template> <button @click="increment">{{ count }}</button> <p>Удвоенное: {{ double }}</p> 
</template>

Хуки жизненного цикла

В Composition API используются функции вроде onMounted(), onUnmounted() и другие для работы с жизненным циклом компонента

Пример:

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Компонент смонтирован');
    });
  }
};

Composable-функции

Это функции, которые инкапсулируют логику состояния (state) и могут переиспользоваться в разных частях приложения

Пример:

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  }
};

Ключевые особенности

• Реактивность: Данные автоматически обновляют интерфейс.
• Инкапсуляция: Логика хранится в отдельных модулях (composables).
• Глобальность: Состояние доступно во всех компонентах при импорте.

Сравнение с Pinia

Плюсы и минусы Composition API

Плюсы:

• Не требует сторонних библиотек.
• Полная свобода в структурировании кода.
• Подходит для небольших проектов.

Минусы

Кривая обучения: для новичков может быть сложнее освоить Composition API из-за отсутствия привычной структуры Options API

Потенциальная сложность кода: если не соблюдать модульности, setup-функция может стать слишком громоздкой

Переход со старых проектов: миграция с Options API может потребовать значительных усилий для крупных приложений

Когда использовать?

• Простые приложения: Лэндинги, небольшие SPA.
• Прототипы: Быстрый старт без настройки Pinia.
• Локальное состояние: Управление данными в рамках одного компонента.

Пример с глобальным состоянием

javascript// stores/auth.js
import { reactive } from 'vue';

export const authStore = reactive({
  user: null,
  isLoggedIn: false,
  async login(email, password) {
    // Запрос к API...
    this.user = { email };
    this.isLoggedIn = true;
  }
});

Использование:

text<script setup>
import { authStore } from '@/stores/auth';
</script>

<template>
  <div v-if="authStore.isLoggedIn">Привет, {{ authStore.user.email }}</div>
</template>

Хранилища на Composition API — это легковесная альтернатива Pinia, идеальная для проектов, где важны простота и минимализм. Однако для сложных приложений с SSR, DevTools и строгим контролем состояния лучше выбрать Pinia