When developing Vue.js apps we found a simple way to structure asynchronous actions using async and await.

Vuex

Vuex is the standard state management approach for Vue.js.

Actions

An action in Vuex is where you perform interaction with APIs and commit mutations. Such interactions are inherently asynchronous.

We found a simple way to write such actions with async and await.

API Access Layer

The API access layer is best separated from the store. This facilities modularity and usage of the API when no state is involved. For example, using the API for typeahead input.

Axios

We configure axios like:

And then use it to define the API calls.

The API Calls

Many APIs require multiple calls to compose an item of information. So we compose those calls with Promise.all and await:

Handling Errors

We catch errors, such as network connectivity, or server-side failures at the API access layer, and present a clean interface For the actions.

Asynchronous Actions

Asynchronous actions await for the API calls and then commit the results:

Written by

Open source, Mobile, Web, Cloud, Server - Independent Information Technology and Services Professional http://yoramkornatzky.com kornatzky@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store