Argumentos flexibles Composables

Hace poco veíamos cómo crear tu primer composable Vue 3. Ya sabes que es un patrón bastante nuevo que permite encapsular y reutilizar pequeñas unidades de lógica reactiva en toda tu aplicación.

Siguiendo con el patrón composable, una de las mejoras que podemos añadir es permitir que sus argumentos sean flexibles, es decir, que sean valores reactivos o no. Esto hace que tu composable sea aún más reutilizable.

¿Cómo conseguirlo?. Gracias a las funciones ref, unRef e isRef.

ref

Ya hemos hablado de ref en Escuela Vue. Te permite generar valores reactivos ya sea en un componente o fuera de él (en un composable, por ejemplo). Cuando crear una referencia reactiva con ref, nos devuelve un objeto en cuya propiedad value se encuentra el valor original, estando esta siempre actualizada. Por ejemplo:

const name = ref("Juan")
name.value // Juan
name.value += " Andrés"
name.value // Juan Andrés

unref

Esta función retorna el valor interno guardado en value, si se se le pasa una referencia reactiva. De lo contrario (si no es una referencia reactiva) retorna el argumento sin más.

const name = ref("Juan")
const myName = unref(name) // retorna name.value
myName // Juan
const newName = unref(myName)
newName // Juan

isRef

Otra utilidad muy útil es la función isRef retorna un valor booleano que indica si un valor es una referencia reactiva o no.

const name = ref("Juan")
isRef(name) // true

Teniendo esto claro, ¿cómo lo aplicamos a un composable?.

Haciendo flexible useAsync

Vamos a permitir a nuestro composable useAsync aceptar una API_URL que pueda ser estática (string) o una referencia reactiva. La ventaja de la segunda opción es que podemos reaccionar a los cambios en su valor.

Abajo te dejaré embebido el código para que puedas hacer tus pruebas, pero en esencia hay dos cambios importantes.

El primero: usamos unref para lanzar la petición HTTP para obtener los datos. De esta forma obtenemos el string con la URL, sea una referencia reactiva o no.

const { results: users } = await (await fetch(unref(API_URL))).json();

El segundo: con isRef decidimos si podemos observar cambios en API_URL y entonces volver a realizar el request con makeRequest.

if (isRef(API_URL)) {
  watchEffect(makeRequest);
} else {
  makeRequest();
}

Esto ahora nos permite cambiar la URL a la que consultar y ver como se actualizan los resultados:

setInterval(() => {
  const randomNumber = Math.floor(Math.random() * 10) + 1;
  API_URL.value = 'https://randomuser.me/api/?results=' + randomNumber;
}, 2000);

Conclusión

Usa isRef y unref para crear código (no solo composables) reutilizable que pueda usar valores reactivos (creados con ref) o valores estáticos (strings, números, etc).

Demo