Какое управление состоянием для Vue 3 лучше всего. Я думаю, это может быть Пиния

С тех пор, как я начал работать с Vue 3 и API композиции, я также экспериментировал с Pinia в качестве библиотеки управления состоянием.

Исходя из более крупного проекта, использующего Vue 2.x и Vuex, уже есть заметные изменения, когда вы начинаете его использовать.

Честно говоря, я никогда не чувствовал себя полностью комфортно с Vuex. Изначально было «много» шаблонного кода, который просто уменьшал использование хранилища. Может быть, это просто моя лень, но управление состоянием действительно должно доставлять удовольствие, поэтому вы более склонны использовать его всякий раз, когда у вас есть небольшая часть состояния, которая должна быть разделена между компонентами.

Различия API

Давайте взглянем на общий дизайн каждого из двух магазинов, чтобы увидеть, сможем ли мы определить некоторые особенности и различия, которые могут убедить нас использовать один из них вместо другого.

Вьюекс

Ниже приведена официальная диаграмма того, как работает Vuex. Это как-то сбивает с толку, но как только вы с этим поработаете, вы освоитесь.

В магазине Vuex есть 4 основных компонента:

1. Состояние

Это просто объект, содержащий фактическое состояние. Вы сможете увидеть состояние в своих инструментах разработки, а также можете сохранить этот объект, если хотите сохранить состояние для кэширования или других целей.

2. Действия

Действия — это функции, выполняющие асинхронные задачи. Они инициируются ключевым словом dispatch.
Действия обычно запрашивают внешний API или выполняют другую асинхронную работу. Действие также отвечает за вызов соответствующей мутации для фактического изменения состояния. Это означает, что действия не изменяют состояние сами по себе, а commit сами изменения, поэтому мутация может изменить состояние.

3. Мутации

Мутация — это единственная функция, которая действительно синхронно изменяет состояние. Мутации используют ключевое слово commit

4. Добытчики

Геттеры можно рассматривать как вычисляемые свойства, и их следует использовать для получения модифицированного ответа из вашего состояния.

Простой пример хранилища Vuex может выглядеть так:

Использование магазина

При работе с вышеперечисленным компонент обычно вызывает dispatch для инициирования асинхронных задач (например, выборки из внешнего API). Если вам нужно изменить состояние, например, простой счетчик, вы должны вызвать commit.

Это означает, что компонент может взаимодействовать с хранилищем, вызывая либо dispatch, либо commit. Не знаю, как вам, а мне это добавляет некоторую перегрузку мозга, которая мне на самом деле не нужна.
До использования Vuex я не очень хорошо знал термины «фиксация» и «диспетчеризация» в контексте внешнего интерфейса. По этой причине мне было не интуитивно использовать их для изменения состояния. Для некоторых людей это может быть по-другому, но я чувствовал себя немного неловко, используя действие или мутацию.

Также стоит отметить, что при использовании Vuex компонент имеет доступ ко всему хранилищу, даже если вы можете логически разделить хранилище Vuex на разные файлы.

Пиния

По сравнению с Vuex диаграмма Pinia выглядит примерно так:

Как вы можете видеть выше, общая архитектура немного проще и понятнее.

Магазин Pinia состоит из 3 основных компонентов.

1. Состояние

Точно так же, как и в случае с Vuex

2. Действия

Действия здесь выполняют ту же работу, что и действия и мутации в Vuex. Это означает, что эти функции должны быть единственным способом изменения состояния. Вы также используете действия, если хотите получить данные из внешнего API и обновить состояние.
Еще одно отличие от настройки Vuex заключается в том, что действия Pinia вызываются как обычные функции. Это дает минимальную когнитивную нагрузку при их использовании!

3. Добытчики

Они работают как вычисляемые свойства для вашего состояния. Например, вы можете получить счет + 5 в магазине ударов.

Простой магазин Pinia может выглядеть так:

Использование магазина

В отличие от Vuex, магазин Pinia разделен на совершенно разные магазины. Это означает, что каждый компонент должен включать определенные хранилища, которые он хочет использовать. Еще одно отличие заключается в том, как мы взаимодействуем с магазином. API намного проще, чем Vuex.

Частично это видно по тому, как мы выполняем действия. С Vuex мы должны использовать ключевое слово dispatch, где мы с Pinia просто называем действия обычными методами. Большая «проблема» с вызовом dispatch заключается в том, что параметр обычно является строкой, что кажется неправильным.

Параметр обычно представляет собой строку, что кажется неправильным.

Заключение

На данный момент я бы сказал, что Pinia намного проще для понимания и работы. Могут быть вещи, которые позволяют Vuex лучше масштабироваться в больших проектах, но я пока с этим не сталкивался.
Еще одна важная вещь для меня заключается в том, что мы можем вызывать обычные методы действий с обычными параметрами.

Pinia также поддерживает как Vue 2, так и 3 из коробки, что значительно упрощает миграцию.

Оставайся простым!