UseCountryRegions(id?: string)

The UseCountryRegions() composable allows for fetching and storing Regions defined for a specific country.

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.

regions

Main data object populated by the load() method.

Type

const regions: ComputedProperty<Region[]>

References: Region

loading

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedProperty<UseCountryRegionsLoading>;

References: UseCountryRegionsLoading

error

Contains errors thrown by any of the composable methods.

Type

const error: ComputedRef<UseCountryRegionsError>;

References: UseCountryRegionsError

load()

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

Type

interface LoadCountryRegionsProps extends BaseProps {
  countryIsoCode: string;
}

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

References: LoadCountryRegionsProps, BaseProps

Example

In the following example, we are creating two instances of the UseCountryRegions() composable. One of them fetches and stores regions defined for GB (Great Britain) and the other one - for PL (Poland).

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

export default {
  setup() {
    const {
      regions: regionsGb,
      load: loadRegionsGb
    } = UseCountryRegions('gb');
    const {
      regions: regionsPl,
      load: loadRegionsPl
    } = UseCountryRegions('pl');

    onMounted(async () => {
      await loadRegionsGb({ countryIsoCode: 'gb' });
      await loadRegionsPl({ countryIsoCode: 'pl' });
    });

    return { regionsGb, regionsPl };
  }
};