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

Привет! В этой статье 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

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

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

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, потому что использует методы жизненного цикла компонента. Она удовлетворяет первому пункту.

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

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

3. У вашей функции есть логика работы с состоянием (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