Ремонт, сервис, услуги » Информация » Pinia vs Vuex: Ананасовый экспресс в светлое будущее




Pinia vs Vuex: Ананасовый экспресс в светлое будущее

Автор: addministr от 17-05-2022, 20:00

Категория: Информация



Gеревод статьи написанной  Emmanuel John ✏️с незначительными поправками на момент 2022 года

Pinia vs Vuex: Является ли Pinia хорошей заменой Vuex?

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 - это обёртка вокруг 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 })
})Установка VuexVuex также прост в настройке, требует установки и создания хранилища.Чтобы установить 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

 

Источник: https://habr.com/ru/post/666250/





Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Архив | Связь с админом | Конфиденциальность

RSS канал новостей     Яндекс.Метрика