Недавно я протестировал Vue 3 с его новой функцией Composition API. Сначала я был сдержан, но как только я привык к этому, это превзошло мои ожидания.
Как было объявлено в Vue 3, Composition API предназначен для решения нескольких проблем:
- Компонентный код разбивался на множество частей, что затрудняло чтение и сопровождение.
- Логику компонентов было сложно разделить на несколько файлов.
- Поддержка TypeScript была плохой.
В дополнение к исправлению этих проблем, Vue 3 также предлагает новую вещь, которая называется Reactivity API, и именно об этом мы поговорим сегодня.
На самом деле, большинство проектов Vue.js используют Vuex для управления состоянием, и будьте уверены, Vuex все еще актуален. Но в течение нескольких месяцев было доступно несколько альтернатив:
- Создание собственного состояния с помощью Composition API и Reactivity API.
- Пиния, о которой мы здесь говорить не будем. Но я хотел упомянуть об этом, потому что это очень многообещающе.
Почему мы должны использовать эти решения вместо Vuex? Фактически, Vuex по-прежнему очень хорош благодаря поддержке плагинов и инструментов для разработки. Но я также думаю, что Vuex избыточен, потому что код выглядит повторяющимся, в основном из-за мутаций.
Давайте погрузимся в код. Мы возьмем здесь в качестве примера счетчик, разделенный на два компонента: счетчик, который будет отображать значение, и инкремент, который будет увеличивать значения (кажется логичным).
Прежде всего, мы определим наше состояние. Я обычно определяю его в каталоге с именем composables или stores.
Я объяснил все в комментариях, но здесь важно помнить, что нужно объявить состояние вне функции, а затем вернуть ссылку на состояние.
Как объясняется в документации Vue.js, если мы не укажем toRefs, он будет передавать по значению, и, как вы можете видеть ниже, первая чашка не обновляется.
Как только наше компонуемое состояние определено, мы можем без проблем использовать его в наших компонентах Vue.js.
Counter.vue отобразит значение счетчика.
Я максимально упростил код здесь. Более красивый рендер доступен на GitHub (с использованием TailwindCSS).
Increment.vue будет увеличивать или уменьшать значения.
Как видите, мы можем использовать методы из составного объекта (например, increment) или напрямую изменять состояние.
А как насчет других функций, таких как геттеры? Конечно, это возможно. Мы можем определить их в состоянии (useCounter.ts) и использовать новую функцию computed.
На этом статья закончится. Итак, мы видим здесь, что создание состояния с помощью Composition API до смешного просто и не требует каких-либо зависимостей.
Но стоит ли нам по-прежнему использовать Vuex? Это зависит. На самом деле я работаю над CRM-приложением, использующим Firebase и Vue 3, и все еще использую Vuex для аутентификации, потому что он отлично работает и хорошо реализован с Firebase.
Но, для сравнения, теперь я использую состояния Composition API для менее сложных случаев, например, когда нескольким компонентам нужны одни и те же данные.
Настройка нового Vuex Store, геттеров, мутаций, действий может быть утомительной для небольших фрагментов данных, поэтому я использую оба метода.
Вы можете найти код, который я использовал для написания этой статьи, на моем GitHub, прямо здесь:
Вы также можете найти превью здесь:
Если есть предложения, оставьте комментарий.
Больше контента на plainenglish.io
