Что такое Pinia и чем она отличается от Vuex?
Состояние и Pinia
Pinia — официальная библиотека состояния для Vue 3, заменившая Vuex.
Структура стора
import { defineStore } from 'pinia';
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
getters: { total: (s) => s.items.reduce((sum, i) => sum + i.price, 0) },
actions: {
add(item) { this.items.push(item); },
},
});
// в компоненте
const cart = useCartStore();
cart.add(product);Отличия от Vuex
- Нет мутаций: состояние меняют прямо или через actions.
- Простая типизация в TypeScript без обёрток.
- Нет вложенных модулей: каждый стор — отдельный файл, они вызывают друг друга.
- Поддержка Composition API (setup-сторы) и DevTools, горячая замена.
- Меньше шаблонного кода.
Setup-стор
export const useCounter = defineStore('counter', () => {
const count = ref(0);
const double = computed(() => count.value * 2);
function inc() { count.value += 1; }
return { count, double, inc };
});Коротко для собеседования
Pinia проще Vuex: без мутаций и модулей, с хорошей типизацией и стилем Composition API.