Pinia vs Vuex: Ананасовый экспресс в светлое будущее
Перевод статьи Emmanuel John ✏️с незначительными поправками на момент 2022 года
Pinia vs Vuex: Является ли Pinia хорошей заменой Vuex?
Введение
Pinia, легковесная библиотека управления состояниями для Vue.js, приобрела популярность в последнее время. Она использует новую систему реактивности во Vue 3 для создания интуитивно понятной и полностью типизированной библиотеки управления состояниями.
Успех Pinia можно объяснить её уникальными возможностями (расширяемость, организация модулей хранилищ, группировка изменений состояния, создание нескольких хранилищ и так далее) для управления хранимыми данными.
С другой стороны, Vuex - это популярная библиотека управления состояниями, созданная для фреймворка Vue, и это рекомендуемая библиотека для управления состояниями основной командой Vue. Vuex уделяет большое внимание масштабируемости приложений, эргономике разработчиков и уверенности в себе. Она основана на той же flux-архитектуре, что и Redux.
В этой статье мы проведём сравнение между Pinia и Vuex. Проанализируем настройку и сильные стороны: сообщества и производительность обоих стейт менеджеров. А также рассмотрим новые изменения в Vuex 5 по сравнению с Pinia 2.
Используемые в этой статье фрагменты кода основаны на Vue 3 Composition API
Настройка
Установка Pinia
Начать работу с Pinia очень просто, поскольку для этого требуется только установка и создание хранилища.
Чтобы установить Pinia, вы можете выполнить следующую команду в терминале:
yarn add pinia
# or with npm
npm install pinia
Эта версия совместима с Vue 3. Если вы ищете версию, совместимую с Vue 2.x, проверьте ветку v1.
Pinia - это обёртка над Composition API Vue 3. Поэтому вам не нужно инициализировать его как плагин, если только вам не нужна поддержка Vue devtools, поддержка SSR и разделение кода webpack:
//app.js
import { createPinia } from 'pinia'
app.use(createPinia())
В вышеприведённом фрагменте мы добавляем Pinia в проект Vue.js, чтобы использовать глобальный объект Pinia в своём коде.
Чтобы создать хранилище, вы вызываете метод defineStore с объектом, содержащим states, actions и getters, необходимые для создания базового хранилища:
// stores/todo.js
import { defineStore } from 'pinia'
export const useTodoStore = defineStore({
id: 'todo',
state: () => ({ count: 0, title: "Cook noodles", done:false })
})
Установка Vuex
Vuex также прост в настройке, требует установки и создания хранилища.
Чтобы установить Vuex, мы можем запустить следующие команды в своем терминале:
npm install vuex@next --save
# or with yarn
yarn add vuex@next --save
Чтобы создать хранилище, вы вызываете метод createStore с объектом, содержащим states, actions и getters, необходимые для создания базового хранилища:
//store.js
import {createStore} from 'vuex'
const useStore = createStore({
state: {
todos: [
{ id: 1, title: '...', done: true }
]
},
getters: {
doneTodos (state) {
return state.todos.filter(todo => todo.done)
}
}
})
Чтобы получить доступ к глобальному объекту Vuex, необходимо добавить Vuex в корневой файл проекта Vue.js следующим образом:
//index.js
import { createApp } from 'vue'
import App from './App.vue'
import {useStore} from './store'
createApp(App).use(store).mount('#app')
Использование
Vuex и Pinia обращаются к своим хранилищам немного по-разному.
Использование Pinia
Используя Pinia, доступ к хранилищу можно получить следующим образом.
export default defineComponent({
setup() {
const todo = useTodoStore()
return {
// дает доступ только к определенному состоянию
state: computed(() => todo.title),
}
},
})
Обратите внимание, что объект state хранилища опущен при доступе к его свойствам.
Использование Vuex
Используя Vuex, доступ к хранилищу можно получить следующим образом:
import { computed } from 'vue'
export default {
setup () {
const store = useStore()
return {
// доступ к состоянию в вычисляемой функции
count: computed(() => store.state.count),
// доступ к геттеру в вычисляемой функции
double: computed(() => store.getters.double)
}
}
}
Сообщество и экосистема
На момент написания этой статьи автором у Pinia было небольшое сообщество, что приводит к небольшому количеству вкладов и решений на Stack Overflow.
Благодаря популярности Pinia в начале это года и её прогрессу на данный момент, сообщество быстро растет. И Pinia стала рекомендованной основной командой Vue.js библиотекой управления состоянием, на момент 2022 года (прим. переводчика).
Vuex, будучи тоже рекомендованной командой Vue.js библиотекой управления состояниями, имеет большое сообщество с основным вкладом членов основной команды. Решения ошибок Vuex легко доступны на Stack Overflow. Однако Эван Ю, рекомендует новые проекты писать с использованием Pinia (прим. переводчика).
Кривая обучаемости и документация
Обе библиотеки управления состояниями довольно просты в освоении, поскольку имеют отличную документацию и обучающие ресурсы на YouTube и в сторонних блогах. Их кривая обучаемости легче для разработчиков с предыдущим опытом работы с библиотеками архитектуры Flux, такими как Redux, MobX, Recoil и другими.
Документация обеих библиотек великолепна и написана в манере, удобной как для опытных, так и для начинающих разработчиков.
Звезды на GitHub
На момент написания этой статьи Pinia имеет два основных релиза: v1 и v2, причем v2 имеет более 7,3K звезд на GitHub. Это, безусловно, одна из самых быстрорастущих библиотек управления состояниями в экосистеме Vue.js, учитывая, что она была первоначально выпущена в 2019 году и является относительно новой.
Между тем, с момента создания библиотеки Vuex и до настоящего времени она выпустила пять стабильных релизов. Хотя v5 находится на экспериментальной стадии, v4 Vuex является самым стабильным релизом на данный момент и имеет около 27,6K звезд на GitHub.
Производительность
И Pinia, и Vuex очень быстры, и в некоторых случаях ваше веб-приложение будет работать быстрее при использовании Pinia по сравнению с Vuex. Этот прирост производительности можно объяснить чрезвычайно малым весом Pinia. Pinia весит около 1 КБ.
Хотя Pinia создана с поддержкой Vue devtools, некоторые функции, такие как перемещение во времени и редактирование, все еще не поддерживаются, потому что Vue devtools не предоставляет необходимые API. На это стоит обратить внимание, если скорость разработки и отладка являются более предпочтительными для вашего проекта.
Сравнение Pinia 2 с Vuex 4
Pinia проводит сравнение с Vuex 3 и 4:
Мутаций больше не существует. Они очень часто воспринимались как чрезвычайно многословные. Изначально они привносили интеграцию с devtools, но это больше не проблема.
Нет необходимости создавать собственные сложные обёртки для поддержки TypeScript, всё типизировано, а API разработан таким образом, чтобы максимально использовать вывод типов TS.
Это дополнительные выводы, которые делает Pinia при сравнении своей библиотеки управления состояниями с Vuex:
В Pinia нет поддержки вложенных хранилищ. Вместо этого она позволяет создавать хранилища по мере необходимости. Тем не менее, хранилища могут быть вложенными неявно, импортируя и используя одно хранилище внутри другого.
Хранилища получают пространство имен автоматически по мере их определения. Таким образом, нет необходимости в явном пространстве имен модулей.
Pinia позволяет создавать несколько хранилищ и автоматически разделять их в коде бандлера.
Pinia позволяет использовать геттеры в других геттерах
Pinia позволяет группировать изменения на временной шкале devtools с помощью $patch:
this.$patch((state) => {
state.posts.push(post)
state.user.postsCount++
})
.catch(error){
this.errors.push(error)
}
По словам создателя Pinia (Эдуардо Сан Мартин Мороте), который также является членом основной команды Vue.js и активно участвует в разработке Vuex, Pinia и Vuex имеют больше сходств, чем различий:
Pinia старается оставаться как можно ближе к философии Vuex. Он был разработан для тестирования предложения для следующей итерации Vuex и оказался успешным, поскольку в настоящее время у нас есть открытый RFC для Vuex 5 с API, очень похожим на тот, который используется в Pinia. Моё личное желание в этом проекте - переработать опыт использования глобального хранилища, сохранив при этом доступную философию Vue. Я сохраняю API Pinia настолько близким к Vuex, насколько он продолжает двигаться вперёд, чтобы облегчить людям переход на Vuex или даже слияние обоих проектов (под Vuex) в будущем.
Хотя Pinia достаточно хороша, чтобы заменить Vuex, замена Vuex не является её целью, поэтому Vuex остаётся рекомендуемой библиотекой управления состояниями для приложений Vue.js. (Прим переводчика: на момент весны 2022 Pinia - является официальным стейт менеджером, как и Vuex)
Плюсы и минусы Vuex
Плюсы
Поддерживает такие функции отладки, как перемещение во времени и редактирование
Подходит для крупномасштабных и высокосложных проектов Vue.js
Минусы
Начиная с Vue 3, результат геттера не кэшируется, как это делает вычисляемое свойство
Vuex 4 имеет некоторые проблемы, связанные с безопасностью типов
Плюсы и минусы Pinia
Плюсы
Полная поддержка TypeScript: добавление TypeScript очень просто по сравнению с добавлением TypeScript в Vuex
Исключительно лёгкий (весит около 1 КБ)
Действия хранилища отправляются как вызовы обычных функций, а не с помощью метода dispatch или вспомогательной функции MapAction, что часто встречается в Vuex
Имеет поддержку нескольких store
Поддерживает Vue devtools, SSR и разделение кода webpack.
Минусы
Нет поддержки функций отладки, таких как перемещение по времени и редактирование.
Когда использовать Pinia, а когда нужен Vuex
По моему личному опыту, благодаря небольшому весу Pinia подходит для малых и средних приложений. Она также подходит для проектов Vue.js с низкой сложностью, поскольку некоторые функции отладки, такие как путешествие во времени и редактирование, все еще не поддерживаются.
Использование Vuex для малых и средних проектов Vue.js является излишеством, поскольку его вес сильно влияет на снижение производительности. Следовательно, Vuex подходит для крупномасштабных и высокосложных проектов Vue.js.
Заключение
В этой статье было проведено сравнение между Vuex и Pinia, выделены их лучшие особенности, документация, сила сообщества, кривые обучаемости, а также некоторые подводные камни, обнаруженные в обеих библиотеках на момент написания статьи.
Vuex 4 и Pinia в большинстве своем похожи, и их можно использовать для решения одних и тех же задач.
В целом, один не лучше другого - они оба достигают желаемой цели. Все зависит от вашего сценария использования и предпочтений. Также следует помнить, что создатель Pinia заявил, что целью Pinia не является замена Vuex. Скорее, её цель - облегчить разработчикам переход на Vuex или даже объединить оба проекта (под Vuex) в будущем.
P.S.: на момент написания и перевода Pinia уже в экосистеме Vue 3.