Services

Estos servicios se utilizan en las verticales con js. La forma correcta de hacerlo está en: ApiServicesTs.mdx

Create in /services the file where you will make the api call. This file must have a .js extension (example: educationApiService.js)

import { httpClient } from "@/services/useFetchApi";

/**
 * Fetches global service data from an API.
 * @async
 * @function
 * @param {string} lang - The language code for the data.
 * @returns {Promise<Object>} The response from the API.
 * @throws {Error} Will throw an error if the request fails.
 * @example
 * // Fetches global service data in English
 * getGlobalService('en').then(data => console.log(data));
 */
export const getGlobalService = async (lang) => {
  const params = [
    { name: "populate", value: "*" },
    { name: "locale", value: lang },
  ];
  const { response } = await httpClient.get("global-service", params);
  return response;
};

In /services/index.js add the get of your service

import { getEvent } from "@/services/eventsApiService";
import { getGlobalService } from "@/services/globalServicesApiService";

export { getEvent, getGlobalService };

In /stores/data.js add your const variable, const get and add all in setBlocksData and return your get

/**
 * Defines a store for data.
 * @module useDataStore
 */
import { getEvent, getGlobalService } from "@/services/index";

export const useDataStore = defineStore("data", () => {
  /**
   * Reactive object for event data.
   * @type {Object}
   */
  const event = reactive({});
  /**
   * Reactive object for global service data.
   * @type {Object}
   */
  const globalService = reactive({});

  /**
   * Getter for event data.
   * @returns {Object} The event data.
   */
  const getEventBlock = () => event.value;
  /**
   * Getter for global service data.
   * @returns {Object} The global service data.
   */
  const getGlobalServiceBlock = () => globalService.value;

  /**
   * Fetches event and global service data from an API.
   * @async
   * @function
   * @param {string} lang - The language code for the data.
   * @returns {Promise<void>}
   * @throws {Error} Will throw an error if the request fails.
   * @example
   * // Fetches event and global service data in English
   * setBlocksData('en').then(() => console.log(event.value, globalService.value));
   */
  const setBlocksData = async (lang) => {
    event.value = await getEvent(lang);
    globalService.value = await getGlobalService(lang);
  };

  return {
    setBlocksData,
    getEventBlock,
    getGlobalServiceBlock,
  };
});

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useModeStore, import.meta.hot));
}

import the service into your componen

t

import { useDataStore } from "@/stores/data";
const { getGlobalServiceBlock } = useDataStore();
const globalService = computed(() => getGlobalServiceBlock());
console.log(globalService);