В чем разница между Pinia и Vuex

«В чем разница между Pinia и Vuex» — вопрос из категории Vue, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Pinia — это более современная альтернатива Vuex, созданная для Vue 3. Основные отличия:

  1. Типизация — Pinia изначально поддерживает TypeScript без костылей.
  2. Простота — нет мутаций, только actions и state. Actions могут напрямую изменять состояние.
  3. Модульность — каждый store автономен, не нужен единый корневой модуль.
  4. Composition API — Pinia лучше интегрирован с Composition API.

Пример Pinia:

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

Vuex требует больше бойлерплейта (mutations, actions раздельно) и менее гибок в TypeScript. Pinia легче и современнее, но Vuex пока более зрелый.