¿Qué es un composable en Vue 3?

Los composables son una nueva característica de Vue 3 que permiten a los desarrolladores escribir código de manera más clara y concisa. Los composables son funciones que devuelven objetos de composición y se pueden utilizar para encapsular lógica de negocios y comportamiento de componentes.

Por ejemplo, en lugar de tener que escribir todo el código necesario para hacer una llamada a una API en el componente, puedes crear un composable que contenga esa lógica y llamar al composable desde el componente. Esto hace que el código sea más fácil de leer y mantener.

Los composables también se pueden utilizar para crear componentes reutilizables que se pueden importar y utilizar en diferentes partes de la aplicación. Por ejemplo, si tienes un composable que se encarga de hacer una llamada a una API y obtener datos, puedes utilizar ese composable en diferentes componentes para mostrar los datos en diferentes partes de la aplicación.

Composable en Vue 3 para obtener productos

Supongamos que queremos crear un componente que muestre información sobre un producto en nuestra aplicación. Para obtener la información del producto, necesitamos hacer una llamada a una API. En lugar de escribir toda la lógica necesaria para hacer la llamada a la API en el componente, podemos crear un composable que se encargue de esa tarea y llamar al composable desde el componente.

Aquí tienes cómo podría verse este composable en Vue 3:

import { ref } from 'vue'
import axios from 'axios'

export function useProductInfo() 
{
  const productInfo = ref({})
  const isLoading = ref(false)
  const error = ref(null)

  async function fetchProductInfo(productId) 
  {
    isLoading.value = true
    try {
      const response = await axios.get(`/api/products/${productId}`)
      productInfo.value = response.data
    } catch (e) {
      error.value = e
    } finally {
      isLoading.value = false
    }
  }

  return {
    productInfo,
    isLoading,
    error,
    fetchProductInfo
  }
}

El composable useProductInfo utiliza la función "ref" de Vue 3 para crear una variable reactiva que se actualizará automáticamente cuando cambie su valor. También tiene una función asíncrona "fetchProductInfo" que hace una llamada a la API y actualiza la variable "productInfo" con la información del producto obtenida de la respuesta de la API.

Para utilizar este composable en un componente, podemos hacerlo de la siguiente manera:

import { useProductInfo } from '@/composables/useProductInfo'

<script setup>
const { productInfo, isLoading, error, fetchProductInfo } = useProductInfo()

fetchProductInfo(1)
</script>

<template>
  <div v-if="isLoading">Obteniendo información del producto...</div>
  
  <div v-else>
    <div v-if="productInfo">
      {{ productInfo }}
    </div>
    <div v-if="error">
      {{ error }}
    </div>
  </div>
</template>

En este ejemplo, hemos importado el composable "useProductInfo" y lo hemos utilizado en el componente "ProductInfo". Podemos acceder a las variables y funciones del composable como si fueran propiedades y métodos del componente. Por ejemplo, podemos utilizar la función "fetchProductInfo" para hacer la llamada a la API y mostrar la información del producto en el componente.

Composable Paginación en Vue 3

Aquí tienes otro ejemplo de cómo podrías utilizar un composable para implementar un sistema de paginación en una aplicación de Vue 3:

Primero, crearemos un composable que se encargue de obtener los datos de la página actual y los datos de las páginas siguientes:

import { ref } from 'vue'
import axios from 'axios'

export function usePagination(url) 
{
  const page = ref(1)
  const data = ref([])
  const isLoading = ref(false)
  const hasMore = ref(true)
  const error = ref(null)

  async function fetchPage() {
    isLoading.value = true
    try {
      const response = await axios.get(`${url}?page=${page.value}`)
      data.value = [...data.value, ...response.data]
      hasMore.value = response.data.length === 10
      page.value++
    } catch (e) {
      error.value = e
    } finally {
      isLoading.value = false
    }
  }

  return {
    data,
    isLoading,
    hasMore,
    error,
    fetchPage
  }
}

El composable usePagination tiene una función "fetchPage" que hace una llamada a la API y obtiene los datos de la página actual y los datos de las páginas siguientes. También tiene una variable "hasMore" que indica si hay más páginas disponibles para cargar.

A continuación, podemos utilizar este composable en un componente para mostrar los datos y la paginación:

<script setup>
import { usePagination } from '@/composables/usePagination'

const { data: products, isLoading, hasMore, error, fetchPage: fetchProducts } = usePagination('/api/products')

fetchProducts()
</script>

<template>
  <ul>
    <li v-for="product in products" :key="product.id">{{ product.name }}</li>
  </ul>
  <button v-if="hasMore" @click="fetchProducts">Cargar más</button>
</template>

Con este enfoque, podemos implementar la paginación de manera sencilla utilizando composables en Vue 3.

Si quieres seguir aprendiendo más cosas sobre Vue 3 y Composition API, no te pierdas la ruta de aprendizaje.