useStore composable

useStore composable allows loading and changing currently active store.

API

useStore composable returns the following properties:

• load - function that fetches a list of available stores.
• change - function that changes the current store and reloads the page.
• stores - main data object populated by the load() method.
• error - ref that contains an errors from the composable methods.
• loading - ref that contains information whether any of the composable methods is loading.

Interfaces

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

interface UseStoreInterface {
  change(store: StoreConfig): void;
  load(customQuery?: { availableStores: string }): Promise<void>;
  stores: Ref<AvailableStores>;
  loading: DeepReadonly<Ref<boolean>>;
  error: DeepReadonly<Ref<UseStoreErrors>>;
}

Example

Load available stores on mount and handle change of the store:

<template>
<SfList v-if="availableStores.length > 1">
  <SfListItem
    v-for="store in availableStores"
    :key="store.id"
  >
    <a
      href="/"
      @click.prevent="changeStore(store)"
      ...
    >
      <SfCharacteristic class="language">
          <span>{{ store.store_name }}</span>
          <SfImage
            :src="`/icons/langs/${store.locale}.webp`"
            ...
          />
      </SfCharacteristic>
    </a>
  </SfListItem>
</SfList>
</template>

<script>
import { useStore, AvailableStores } from '~/composables';

setup() {
  const { stores, load, change } = useStore();

  const availableStores = computed<AvailableStores>(() => stores.value ?? []);

  onMounted(() => {
    if (stores.value && stores.value?.length) return;
    load();
  });

  return {
    availableStores,
    change
  };
}
</script>