useProductSuggestions(id?: string)

The useProductSuggestions() composable allows for storing and searching for product suggestions.

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.

suggestions

Main data object populated by the load() method.

Type

const suggestions: ComputedRef<Suggestion[]>;

References: Suggestion

loading

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedRef<boolean>;

error

Contains errors thrown by any of the composable methods.

Type

const error: ComputedRef<UseProductSuggestionsError>;

References: UseProductSuggestionsError

load()

Fetches suggestions for a given searchTerm and writes them to the suggestions property. Under the hood, it sends a request to the getSuggestions API endpoint.

Type

interface LoadProductSuggestionsProps {
  searchTerm: string;
  max?: number;
}
async function load(props: LoadProductSuggestionsProps): Promise<void>;

References: LoadProductSuggestionsProps

Example

In this example, we are creating a simple wrapper for the load() method. It accepts a single term param and calls the load() method with the right arguments. We are also exposing the loaded suggestions to the templates by returning them from the setup() method.

import { useProductSuggestions } from '@vsf-enterprise/sapcc';
export default {
  setup() {
    const { load, suggestions } = useProductSuggestions('unique-id');
    const loadSuggestionsForTerm = async (term) => {
      await load({ searchTerm: term, max: 5 });
    };
    return { loadSuggestionsForTerm, suggestions };
  }
};

reset()

Resets the composable's state. It Performs no async operations under the hood.

Type

function reset(): void;