Привет! В этой статье c помощью простого чек листа за пару шагов выясним, являются ли функции, которые вы пишете в своем vue коде, настоящими composables.

Согласно документации, composables это функции, которые благодаря использованию внутри себя composition API, инкапсулируют и переиспользуют логику, в работе которой задействовано состояние приложения (локальное или глобальное).

Если ваша функция принимает на вход определенные числа и возвращает наименьшее значение из них, то у такой функции нет работы с состоянием, а значит это не может называться composable, в действительности это функция утилита.

function minValue(...args) {
    const min = args.reduce((acc, val) => {
        return acc < val ? acc : val;
    });
    return min;
}

С другой стороны, если ваша функция манипулирует состоянием (будь то состояние внутреннее или глобальное), совершает внешние взаимодействия для того чтобы это состояние заполнить (фечинг, Intersection Observer, манипуляции с DOM), то она, безусловно, является подлинным composable и ее название следует начинать c use

function useMenu(gqlClient: GqlClient) {
    const isLoading = ref(false);
    const menuItems = ref<MenuSectionItem[]>([]);

    function setSectionItem(item: Section): SectionItem {...}

    async function fetchMenuItemList() {
      const result = await gqlClient.query(getMenuQuery());
      ...
      menuItems.value = result.items;
    }
}

✏️ Чеклист для определения Vue composable

Лишь одного в попадания в пункт будет достаточно, чтобы пройти тест, вам не нужно попадать во все три.

Ваша функция внутри себя использует методы жизненного цикла.

function useInterval(cb: () => void, interval = 1000) {
  let timer: ReturnType<typeof setInterval> | null = null

  function clean() {
    if (timer) {
      clearInterval(timer)
      timer = null
    }
  }

  onMounted(() => {
    if (interval <= 0) return;
  
    timer = setInterval(cb, interval)
  })
  
  onBeforeUnmount(() => {
    clean()
  })
}

Функция выше не манипулирует с состоянием, но по-прежнему является composable, потому что использует методы жизненного цикла компонента. Она удовлетворяет первому пункту.

Ваша функция внутри себя использует другие composables. Конечно, вы вполне можете выстраивать композицию из composable функций, и если единственная работа функции заключается в том, чтобы внутри себя вызвать другую composable функцию, то она тоже является таковой без исключений. Например, функция может использовать внутри себя написанный вами useFetch , использовать useSomething из библиотеки vue-use и тому подобное.

function useScreenInitialize() {
    const { x, y } = useMouse()
    // возможна дополнительная логика
    return [x, y]
}

У вашей функции есть логика работы с состоянием (stateful logic). Чаще всего это работа с ref, который хранит определенное состояние, и изменение или преобразование этого состояния происходит в функции.

function useUser (gqlClient: GqlClient) {
  const user = ref(null)
  const userPreferences = computed(() => user.value?.preferences ?? [])

  async function fetchUser () {
    user.value = await gqlClient.query(getUserQuery())
  }
  // больше логики опционально

  return {
    user: readonly(user),
    fetchUser,
    userPreferences
  }
}

Итог

Composables - это функции на composition API, которые переиспользуют логику с методами жизненного цикла, другими composables и/или хранят и преобразуют состояние.

✌️ Всегда рад предложениям и обратной связи - bronnikovmb@gmail.com

То, что вы пишете, это точно composables?