Composition API Based Pattern

Learn how the Composition API-based pattern handles API action states and error handling.

We'll cover the following

Let’s implement the same functionality we’ve just covered using Composition API. We need to import the ref and computed methods from the vue package, the upperFirst function from lodash, and the apiStatus object with API statuses from api/constants. The useApi composable in the api/composables/useApi.js directory accepts three parameters:

  • The apiName is a string that’s used to generate statuses.
  • The fn is a function that performs an API request.
  • The config is an object with additional configuration to enable specifying initialData and responseAdapter. The former is used as a default value, whilst the latter transforms data before it’s set on the data ref.

Get hands-on with 1200+ tech skills courses.