Ответ
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Ответ 18+ 🔞
А, Pinia, говоришь? Ну это, блядь, такая штука, чтобы в твоём Vue-приложении не было бардака, как в моей квартире после пятницы. Вместо того чтобы таскать состояние туда-сюда через пропсы, как дурак с пакетами, ты его в одно место складываешь. Типа общего холодильника для данных, понимаешь?
Раньше все юзали Vuex, конечно. Но там, ёпта, столько церемоний — мутации, экшены, геттеры... Чувствуешь себя не программистом, а архивариусом в ёбаном министерстве. Pinia — это как будто взяли тот Vuex, выкинули оттуда всю бюрократию, оставили только суть и сказали: «На, мужик, работай, не еби мозг».
Чем он, сука, хорош:
- Пиздец как просто. Одна функция
defineStore()— и хранилище готово. Никаких модулей, никакой хуйни. - Всё само обновляется. Изменил состояние в хранилище — компоненты, которые на него подписаны, сразу это видят. Магия, блядь, но приятная.
- Хочешь — пиши как в Composition API, хочешь — как в Options. Похуй, делай как удобно. Pinia не загоняет в рамки, как некоторые.
- Для DevTools тоже всё готово. Будешь смотреть, что и где поменялось, как заправский детектив.
Смотри, как это выглядит на практике:
Создаём файлик, ну, stores/counter.js. Не благодари.
// 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 увеличится!Вот и вся философия, в рот меня чих-пых! Никаких лишних телодвижений. Создал, вызвал, использовал. Красота, да и только. Если Vuex — это поход в ЗАГС со всеми справками, то Pinia — это гражданский брак: всё честно, но без лишней волокиты. Рекомендую, чувак.