Что такое Pinia

Pinia — это хранилище состояния (state management) для Vue.js, альтернатива Vuex. Проще, легковеснее и с TypeScript-поддержкой из коробки.

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

• Простота API — defineStore() создает хранилище.
• Реактивность — состояние автоматически обновляет компоненты.
• Гибкость — можно использовать Composition или Options API.
• DevTools — интеграция с Vue DevTools.

Пример:

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

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

import { useCounterStore } from '@/stores/counter';

const counter = useCounterStore();
counter.increment(); // Увеличит count