Чому Pinia замінює Vuex в екосистемі Vue3?

VueJunior~1 хв читання

Ключові причини, чому Pinia замінює Vuex

Vuex → зміни стану відбуваються через mutations, які:

Pinia → mutations немає. Є лише:

this.count++   // валідно в Pinia

→ Код простіший → Менше шарів → Менше файлів → Швидше розуміти

Vue 3 повністю орієнтований на setup() і ref/reactive. Vuex був створений для Vue 2 - до появи Composition API.

Pinia:

Vuex погано вписувався в нову парадигму.

Vuex з TypeScript → біль: потрібно вручну писати типи для:

У Pinia типи:

Це робило Pinia пріоритетним вибором для сучасних проєктів.

Приклад Vuex:

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

Pinia:

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

Різниця очевидна. Pinia значно простіша, особливо у великих проєктах.

Nuxt 3 обрав Pinia як стандартний стор, а не Vuex. Це автоматично закріпило її як дефолтний state manager в екосистемі Vue 3.

SSR у Pinia:

Vuex → SSR складніший.

Pinia підтримує HMR:

Vuex цього не вмів або потребував ручних патчів.

Плагіни в Pinia:

Чудово підходить для:

Vuex → складніше, більше boilerplate.

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

Premium

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