useProduct(id?: string)

The useProduct() composable allows for loading and storing Products.

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.

product

Main data object populated by the search() method.

Type

const product: ComputedRef<Product>;

References: Product

Example

import { useProduct } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { product } = useProduct('unique-id');

    return { product };
  }
};

loading

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedProperty<UseProductLoading>;

References: UseProductLoading

error

Contains errors thrown by any of the composable methods.

Type

const error: ComputedRef<UseProductError>;

References: UseProductError

search()

Fetches a product from the API and saves the fetched object in the product property. Under the hood, it sends a request to the getProduct API endpoint.

Type

interface SearchProductProps extends BaseProps {
  id: string;
}

async function search(props: SearchProductProps): Promise<void>;

References: SearchProductProps, BaseProps

Example

In the following example, we are fetching a product by its code and exposing the product property to the templates by returning it from the setup() method.

import { onSSR } from '@vue-storefront/core';
import { useProduct } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { search, product } = useProduct('unique-id');

    onSSR(async () => {
      await search({ id: '1' });
    });

    return { product };
  }
};

Example

In the following example, we are fetching a product by its code and specify a subset of fields we want the received product to have.

import { onSSR } from '@vue-storefront/core';
import { useProduct } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { search, product } = useProduct('unique-id');

    onSSR(async () => {
      await search({
        id: '1',
        fields: 'BASIC'
      });
    });

    return { product };
  }
};