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

Архитектура Vue.js-приложения с использованием Pinia зависит от масштаба проекта и его сложности. Pinia — это официальная библиотека для управления состоянием во Vue, которая пришла на смену Vuex. Она проще в использовании, обладает TypeScript-поддержкой и более гибкая.

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

Pinia стоит использовать в следующих случаях:

1. Глобальное состояние – когда данные должны быть доступны в разных компонентах без prop drilling.
   • Пример: данные пользователя, тема приложения, корзина в интернет-магазине.
2. Сложная бизнес-логика – если нужно вынести управление состоянием и методы работы с ним в отдельный слой.
   • Пример: фильтрация товаров, кэширование API-запросов.
3. Кэширование данных – если нужно хранить данные, полученные с бэкенда, и избегать лишних запросов.
4. Серверный рендеринг (SSR) – Pinia хорошо работает с Nuxt.js и SSR.
5. TypeScript-проекты – Pinia отлично поддерживает TypeScript из коробки.

Когда можно обойтись без Pinia?

• Локальное состояние – если данные нужны только в одном компоненте, используйте ref / reactive.
• Простые пропсы и события – если можно обойтись передачей данных через props и emits.
• Мини-приложения – если проект очень маленький, внедрение хранилища может быть избыточным.

Базовая архитектура с Pinia

src/  
├── stores/          # Хранилища Pinia  
│   ├── user.store.ts  
│   ├── cart.store.ts  
│   └── ...  
├── components/      # Vue-компоненты  
├── composables/     # Композаблы для логики (если используется Composition API)  
├── services/        # API-клиенты и бизнес-логика  
├── router/          # Маршрутизация  
└── main.ts          # Инициализация Vue + Pinia  

Пример хранилища (store) в Pinia

// stores/cart.store.ts
import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [] as CartItem[],
  }),
  getters: {
    totalItems: (state) => state.items.length,
  },
  actions: {
    addItem(item: CartItem) {
      this.items.push(item);
    },
    async fetchCartItems() {
      const data = await api.getCartItems();
      this.items = data;
    },
  },
});

Вывод

Используйте Pinia, когда:

• Нужно глобальное состояние.
• Бизнес-логика сложная и требует отдельного слоя.
• Проект на TypeScript.
• Приложение масштабируется.

Не используйте Pinia, если:

• Состояние локальное и простое.
• Приложение очень маленькое.

Pinia делает код более структурированным и удобным для поддержки, но добавляет некоторую сложность, поэтому выбирайте её осознанно. 🚀