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

Gеревод статьи написанной  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 - это обёртка вокруг 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