Skip to main content

Чому в Pinia немає мутацій?

VueJunior~1 хв читання
Запропонувати правку

Основні причини, чому в Pinia немає мутацій

1. Vue 3 використовує реактивність Composition API - мутації стали зайвими

У Vuex мутації були потрібні для того, щоб:

  • відстежувати, хто змінив стан
  • забезпечити передбачувані оновлення
  • реєструвати зміни для DevTools

Але у Vue 3 вся реактивність видима з коробки, і зміни стану автоматично відстежуються.

Тому потреба в окремому шарі - mutations - зникла.

Зайвий шар видалено Pinia спрощує архітектуру: state → actions → компонент

2. Мутації створювали надлишковий boilerplate у Vuex

Порівняння:

Vuex:

js
mutations: { increment(state) { state.count++ } }, actions: { increment({ commit }) { commit('increment') } }

Pinia:

js
actions: { increment() { this.count++ } }

Boilerplate у Vuex:

  • писати mutation
  • писати action
  • викликати commit
  • підтримувати величезні файли з мутаціями

Pinia прибрала цілий шар - менше коду, простіше життя.

3. Мутації погано працюють з TypeScript

Vuex + TS = багато болю:

  • складно типізувати payload
  • типи потрібно оголошувати вручну
  • мутації легко викликають розсинхронізацію типів

Pinia спочатку проєктувалася під TypeScript, тому:

  • мутації не потрібні
  • дії мають автоматичну типізацію
  • state і getters виводяться автоматично

Видалення мутацій = чистіша і строгіша типізація.

4. У мутаціях немає сенсу, якщо можна змінювати state напряму

Pinia дозволяє:

js
this.count++

Навіщо тоді писати:

js
commit('increment')

Або:

js
mutations: { increment(state) { state.count++ } }

Прямі зміни безпечні, тому що реактивність Vue 3 відстежує все автоматично.

Мутації - просто зайвий посередник.

5. У Vuex мутації створювали занадто багато шарів

У Vuex дані течуть через:

state → mutation → action → компонент

У Pinia:

state → action → компонент

Менше шарів → простіше розуміти код → легше налагоджувати.

6. DevTools Vue 3 можуть відстежувати зміни без мутацій

Vuex вимагав мутацій, щоб DevTools показували:

  • які поля змінено
  • коли і ким

Pinia не потребує мутацій:

  • зміни реактивного стану Vue 3 автоматично логуються
  • DevTools отримують інформацію напряму
  • немає потреби вручну розділяти мутації і дії

Мутації втратили сенс.

Підсумок (ідеально для співбесіди)

У Pinia немає мутацій, тому що вони стали непотрібними з появою Composition API і нової реактивності Vue 3. Прямі зміни стану безпечні, простіші і повністю відстежуються DevTools. Видалення мутацій зменшує boilerplate, покращує типізацію і робить архітектуру чистішою і простішою.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку