PassFront
  1. PassFront
  2. База знаний
  3. Состояние и Pinia

Что такое 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.

Другие вопросы раздела