useStore

Features

useStore composable can be used for:

• Loading available stores with related channels.
• Change and save selected store.

API

• load - function for fetching stores data. When invoked, it requests data from the API and populates response property. This method accepts a single optional params object. The params has the following option:

  • customQuery?: CustomQuery

    type CustomQuery = {
      [key: string]: string
    }
    
    interface AgnosticStore {
      name: string;
      id: string;
      description?: string;
      locales?: AgnosticLocale[];
      currencies?: AgnosticCurrency[]
      address?: AgnosticAddress;
      geoLocation?: AgnosticGeoLocation;
      [x: string]: unknown;
    }
    

• change - function for changing and saving selected store / channel. This method accepts a single params object. The params has the following options:

  • currentStore: AgnosticStore

  • store: AgnosticStore

  • customQuery?: CustomQuery

• response - a main data object that contains loaded stores data.

  type StoreQueryResult = {
    offset: Scalars["Int"];
    count: Scalars["Int"];
    total: Scalars["Long"];
    results: Array<Store>;
  };
  
  export type Store = {
    id: Scalars["String"];
    version: Scalars["Long"];
    key: Scalars["String"];
    name?: Maybe<Scalars["String"]>;
    nameAllLocales?: Maybe<Array<LocalizedString>>;
    languages?: Maybe<Array<Scalars["Locale"]>>;
    createdAt: Scalars["DateTime"];
    lastModifiedAt: Scalars["DateTime"];
    createdBy?: Maybe<Initiator>;
    lastModifiedBy?: Maybe<Initiator>;
    distributionChannels: Array<Channel>;
    supplyChannels: Array<Channel>;
  };
  

• store: string - a string containing information about current store key.

• loading: boolean - a reactive object containing information about loading state of your load method.

• error: UseStoreErrors - a reactive object containing the error message, if load or change failed for any reason.

  export interface UseStoreErrors {
    load: Error | null;
    change: Error | null;
  }
  

Getters

storeGetter object contains following methods:

• getItems - returns list of stores as AgnosticStore array.

• getSelected - returns selected store as AgnosticStore.

Related references:

• storeGetter
• UseStoreGetters (opens new window)
• StoresData

export interface useStoreGetters {
  getItems(stores: StoresData, criteria?: CRITERIA): AgnosticStore[];
  getSelected(stores: StoresData): AgnosticStore | undefined
}

export interface StoresData extends StoreQueryResult {
  _selectedStore: string;
}

export type StoreQueryResult = {
  __typename?: "StoreQueryResult";
  offset: Scalars["Int"];
  count: Scalars["Int"];
  total: Scalars["Long"];
  results: Array<Store>;
}

export interface AgnosticStore {
  name: string;
  id: string;
  description?: string;
  locales?: AgnosticLocale[];
  currencies?: AgnosticCurrency[]
  address?: AgnosticAddress;
  geoLocation?: AgnosticGeoLocation;
  [x: string]: unknown;
}

export interface AgnosticLocale {
  code: string;
  label: string;
  [x: string]: unknown;
}

export interface AgnosticCurrency {
  code: string;
  label: string;
  prefixSign: boolean;
  sign: string;
  [x: string]: unknown;
}

export interface AgnosticAddress {
  addressLine1: string;
  addressLine2: string;
  [x: string]: unknown;
}

export interface AgnosticGeoLocation {
  type: string;
  coordinates?: unknown;
  [x: string]: unknown;
}

Example

import { useStore, storeGetters } from '@vsf-enterprise/commercetools';
import { onSSR } from '@vue-storefront/core';

export default {
  setup () {
    const { load, response } = useStore();

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

    return {
      stores: storesGetters.getItems(response.value),
      selectedStore: storesGetters.getSelected(response.value)
    };
  }
}