useCountries(id?: string)

The useCountries() composable allows for fetching and storing Countries.

Be careful about shared state

You should pass a unique id as a parameter to avoid state conflicts when using multiple instances of this composable. Every instance with the same id (or those that lack it) will share the same state, even on different pages.

countries

Main data object populated by the load() method.

Type

const countries: ComputedProperty<Country[]>

References: Country

loading

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedProperty<UseCountriesLoading>;

References: UseCountriesLoading

error

Contains errors thrown by any of the composable methods.

Type

const error: ComputedRef<UseCountriesError>;

References: UseCountriesError

load()

Fetches a list of countries from the API and saves them to the countries property. Under the hood, it sends a request to the getCountries API endpoint.

Type

interface LoadCountriesProps extends BaseProps {
  type?: 'SHIPPING' | 'BILLING'
}

async function load(props?: LoadCountriesProps): Promise<void>;

References: LoadCountriesProps, BaseProps

Example

In the following example, we are creating a single instance of the useCountries() composable to fetch and store all countries available in our store (both shipping and billing).

import { useCountries } from '@vsf-enterprise/sapcc';
import { onMounted } from '@nuxtjs/composition-api';

export default {
  setup() {
    const { countries, load } = useCountries();

    onMounted(async () => {
      await load();
    });

    return { countries };
  }
};

Example

In the following example, we are creating two instances of the useCountries() composable. One of them fetches and stores countries defined for billing and the other one does the same for shipping countries.

import { useCountries } from '@vsf-enterprise/sapcc';
import { onMounted } from '@nuxtjs/composition-api';

export default {
  setup() {
    const {
      countries: shippingCountries,
      load: loadShippingCountries
    } = useCountries('shipping');
    const {
      countries: billingCountries,
      load: loadBillingCountries
    } = useCountries('billing');

    onMounted(async () => {
      await loadShippingCountries({ type: 'shipping' });
      await loadBillingCountries({ type: 'billing' });
    });

    return { shippingCountries, billingCountries };
  }
};