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

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

Так что же делает этот модуль? Короче говоря, он объединяет, сохраняет и удаляет заметки. Давайте кратко рассмотрим это.

Хорошо, для некоторого контекста у нас есть Typescript и некоторые типы, которые вы можете найти ниже. В приложении также есть модуль $localForage Nuxt, который хранит данные локально. Проверьте это здесь. Для целей хранения данных в этой статье логика будет удалена.

Теперь давайте перейдем к этому модулю. Сверху у нас, конечно, есть состояние с нашим массивом заметок. Мутации сохраняют заметки, сохраняя их в функции состояния. Затем у нас есть действия, которые добавляют, удаляют и читают заметки из/в хранилище. Один геттер для получения текущих заметок в конце.

Хорошо, пора запачкать руки.

Основная и одна из самых важных вещей, которую позволяет Composition API, — это разделить и переместить нашу общую бизнес-логику в отдельные блоки (файлы), называемые составными. Затем повторно используйте их во всем приложении.

Итак, мы можем создать один из них прямо сейчас. Поместите его в новую папку ~/composables как файл useNotes.ts — мы работаем со структурой Nuxt. Сначала скопируйте типы, которые будут использоваться так же, как это было с модулем Vuex.

В начале мы должны воссоздать состояние. Для этого мы будем использовать новую утилиту, которую предоставляет Composition API, под названием reactive.

reactive — это эквивалент текущего API Vue.observable() в версии 2.x, переименованный во избежание путаницы с наблюдаемыми объектами RxJS. Здесь возвращаемое состояние — это реактивный объект, с которым должны быть знакомы все пользователи Vue. Существенным вариантом использования реактивного состояния в Vue является то, что мы можем использовать его во время рендеринга. Благодаря отслеживанию зависимостей представление автоматически обновляется при изменении реактивного состояния.

Совет: проверьте также объект ref здесь.

Код:

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

Время для нашего составного useNotes.

В том же файле мы определим этот код:

Давайте углубимся в это. Здесь у нас есть простая функция, которая возвращает заметки из ранее определенного состояния и обработчики/действия для сохранения, удаления и получения заметок. На самом деле они выглядят точно так же, как модули Vuex. Заметки теперь представляют собой вычисляемое значение, которое доставляется из Composition API, и это эквивалент хорошо известного computed из Vue Options API.

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

Кроме того, мы предусмотрели некоторые типизации для возвратов. А что касается функций обработки заметок, это довольно просто, для заметок мы используем общий тип для ComputedRef. Начиная с версии 3 Vue, мы получаем все возможности набора текста из коробки — круто.

Теперь мы можем использовать его с реальным компонентом. В нашем случае это будет страница index. Данные из компонуемого useNotes будут передаваться дочерним компонентам в качестве реквизита — подробнее о цепочке данных через реквизиты и Composition API в ближайшее время, следите за обновлениями.

Код страницы index.vue:

С Vue 3 мы получаем этот новый необязательный синтаксис с setup функцией. Это позволяет нам объединить всю логику компонентов в одном месте, упорядоченную по логическим блокам. Идеальный сценарий заключается в том, что вы храните весь свой бизнес-код вне компонента и просто вызываете его вместе с функцией setup. И, как и в нашем примере из index страниц, мы импортировали useNotes компонуемых фрагментов для сбора заметок.

Одна новая вещь, которую вы могли бы здесь отметить, это новая функция onBeforeMount. И, конечно же, это крючок. В Composition API есть новые переопределенные хуки, которые мы можем использовать с функцией setup.

И это все. Спорный? Немного? Что ж, теперь с Composition API мы можем избавиться почти от всей сложности Vuex. С технической точки зрения это будет почти то же самое, но способ его определения и действия с ним будет менее сложным. Это просто функции, которые мы все знаем. Нам не нужны мутации, действия и геттеры. Больше нам вообще не нужно их отображать. Теперь достаточно простого импорта, и мы движемся дальше. И самое большое преимущество модулей Vuex — разделение логики — мы все еще можем получить с Composition API. Еще одна вещь может быть скоростью и производительностью, но для подтверждения этого нужны некоторые тесты. Попробуйте, вы будете в восторге.

Весь код доступен в этом репозитории с упомянутым ранее простым приложением для ноутбука.

Спасибо, наслаждайтесь.