Я уверен, что вы много раз пытались выяснить, как организовать ваше приложение Vue с точки зрения обработки вызовов API по мере роста проекта и возникновения проблем с ремонтопригодностью. Не бойся! После этой статьи у вас будет понимание того, как создать масштабируемое решение. Давай приступим к работе!

1. Наивный подход

Итак, вы создали свой проект с помощью vue-cli, установили некоторый фреймворк пользовательского интерфейса, axios и затем с радостью начали программировать. Вот что такое Вью. Это поможет вам создать отличный и быстрый пользовательский интерфейс в кратчайшие сроки. Я знаю это чувство. Первый просмотр в мгновение ока, затем второй, и вдруг половина вашего приложения готова. Но затем начинается карнавал копирования/вставки. И почему ? Потому что вы выбрали легкий путь и начали делать вызовы API из компонентов.

Почему это плохо?
-Вы не можете использовать его повторно,
-Он раздувает ваши компоненты и делает их неразборчивыми,

Представьте, что у вас есть 4 компонента, которые делают один и тот же вызов API для одного и того же маршрута на сервере. Вам нужно скопировать/вставить код axios четыре раза. А если изменить API? В итоге вы меняете 4 файла. Это плохо. Для меня абсолютный
антипаттерн и запрет на использование.

2. Лучшее решение, но вы лучше этого!

Итак, вы начали понимать, насколько плохой была первая идея, и задумались о рефакторинге? Замечательно. Но с чего начать? Поиск в Google может показаться хорошей идеей? Или какой-то учебник? Почему нет ? Итак, вы прочтете, что действия vuex могут быть хорошим местом для размещения наших вызовов API. Я согласен… частично, и я покажу вам, почему.

Хотя это может выглядеть заманчиво, у него есть некоторые недостатки.

- Беспорядочный способ диспетчеризации действий в компоненте (я знаю, что есть mapActions, но на самом деле они загрязняют пространство имен компонентов и сбивают с толку разработчика, потому что он не знает, является ли это методом компонента или Vuex),
синтаксис -store запутан. для меня
-Если вы используете Typescript (и вы должны), очень сложно создать двустороннюю строгую типизацию.

И лично я считаю, что выполнение вызовов API не является целью Vuex.

3. Итак, где же этот святой Грааль?

Ну как всегда, на яваскрипте :)

Сначала мы создаем класс Javascript:

Почему ? У нас есть несколько глобальных методов для обработки запросов API. Здесь мы можем прикрепить обработчики ошибок, глобальные уведомления об успехах и т. д. Это просто и понятно.

Почему не объект или функции?
На мой взгляд, это более чистое решение, потому что классы просто выглядят аккуратно и лучше организованы, чем экспорт функций или объектов. Если вы считаете иначе, делайте, как хотите :)

Затем мы можем создать наш репозиторий Todo, в котором мы будем вызывать методы из ApiRepository.

И затем в нашем компоненте:

И вуаля!Простое, масштабируемое, готовое к вводу и чистое решение для ваших вызовов API.
Теперь мы можем легко повторно использовать наш TodoRepository во всем приложении.

4. Ладно, чувак, но мне приходится использовать Vuex, потому что я разделяю состояние в приложении.

Совершенно никаких проблем! Просто сделайте следующее:

Оставьте свои мысли в комментариях ниже. Спасибо за чтение. И извините за плохой язык, все еще учусь :)