Как делать API-вызовы с Vuex

0

Вступ

Продолжая работу с нашей серией Vuex, сегодня я объясню, как делать вызовы API с Vuex. В то время как Vuex отлично справляется с синхронизацией данных во внешнем интерфейсе вашего приложения, вам нужно поговорить с базой данных в какой-то момент, чтобы убедиться, что любые изменения будут сохраняться навсегда. К счастью, Vue упрощает работу с API, особенно когда мы используем Vue-ресурс. Хотя Vue-ресурс больше не является частью официальной экосистемы Vue, я думаю, что это еще простой способ встать и перейти с API. Но независимо от обертки API, которую вы решите использовать, концепции, которые я описываю здесь, по-прежнему будут применимы к вашему приложению.

1

Большая картинка 🙂

Как мы знаем из Vuex-документации, Vuex работает следующим образом:

Сразу же, мы видим, что команда Vuex уже говорила нам, чтобы мы взаимодействовали с бэкэнд-API через Actions. Это происходит потому, что действия могут быть асинхронными, а мутации должны быть синхронными. В этой структуре имеет смысл, что действия должны быть местом для вызовов API, потому что они могут дождаться данных, прежде чем совершить Мутацию. Хотя это может показаться немного запутанным концептуально.

2

Настройка API

Прежде чем мы начнем, я хотел бы поблагодарить jonagoldman за GitHub за то, что он изложил эту настройку. Теперь давайте перейдем к коду и посмотрим, как настроить вызовы API в наших действиях. Как обычно, я буду работать с проектом Laravel Spark, но не стесняйтесь настраивать свои каталоги по своему усмотрению.

Как вы можете видеть выше, у меня есть каталог vuex с двумя подкаталогами для modules и utils, а также мой store.js верхнего уровня. Внутри каталога utils есть файл api.js. Это небольшой вспомогательный файл, в котором я обернул некоторые вызовы vue-resource в действиях HTTP.

Теперь, в файле actions.js, вы можете импортировать api.js и использовать api.get(url, request), чтобы сделать запрос. Это не необходимый шаг, но я считаю, что он сохраняет мои действия более сжатыми и читаемыми. Кроме того, если я когда-либо захочу прекратить использование vue-resource, мне просто нужно было бы отредактировать этот файл, и мои действия будут в порядке.

Перейдем к файлу actions.js и посмотрим, как выглядят ваши вызовы API.

3

API в Actions

Вот что может быть полностью сфокусировано в actions.js:

Как вы можете видеть, мы использовали каждый из наших HTTP-действий из api.js — с небольшими вариациями — чтобы дать вам полную картину того, что вы можете сделать. Каждый из вариантов довольно понятен, но давайте пробежимся через них. В функции getIncrementers вы можете видеть, что мы жестко закодированы в URL-адресе. Как правило, я предпочитаю передавать свой url, когда я сопоставляю действие с моим компонентом, поэтому я могу обрабатывать любые динамические URL-адреса. Но если URL-адрес простой, то вы можете оставить его жестко закодированным. Теперь, если вы посмотрите на остальную часть функции, вы увидите, что, поскольку api.get() возвращает Promise, мы можем затем привязать наши мутационные коммиты. Поэтому, если вызов API успешно завершен, я выполняю мутацию GET_INCREMENTS и передаю также ответ API. И если вызов API завершился неудачно, я выполняю другую фиксацию в API_FAILURE с ошибкой, чтобы я мог сообщить пользователю, что что-то пошло не так.

В функциях createIncrementer и updateIncrementer мы обрабатываем вещи несколько иначе. Поскольку нам нужно передать некоторые данные в API, мы включили объект Data в Action. Из Data Object я могу получить URL-адрес и запрос и передать его API. Наконец, в функции deleteIncrementer вы можете видеть, что мы просто передаем URL-адрес API для ссылки. Вот как я обычно обрабатываю динамические URL-адреса, о которых я говорил раньше.

Похожие публикации

Комментарии