Tutorial Vuejs: Introducción a los Composables

¿Qué son los Composables?

Los composables en Vue son funciones reutilizables que encapsulan lógica reactiva, permitiendo compartir y organizar código de una manera más modular y mantenible. Utilizan las APIs de composición de Vue, como ref, reactive, computed y los hooks del ciclo de vida, para gestionar el estado y la reactividad.

En lugar de usar mixins o patrones de herencia, los composables permiten extraer y reutilizar lógica de una manera funcional y más explícita. Esto facilita la comprensión del flujo de datos y la separación de preocupaciones en el código.

Beneficios de los composables

• Reutilización de lógica: Permiten extraer y reutilizar lógica de manera más eficiente que con mixins.
• Composición explícita: Al ser funciones, la lógica es más explícita y fácil de seguir.
• Testabilidad: Los composables pueden ser testeados de manera aislada, facilitando la creación de pruebas unitarias.
• Separación de preocupaciones: Permiten una mejor organización del código, separando la lógica de negocio de la presentación.

Los composables son una herramienta fundamental en Vue para la gestión de la lógica compartida y la organización del código, especialmente en aplicaciones grandes y complejas.

Creación de un composable básico

Para crear un composable básico en Vue, lo primero es entender que un composable es una función que encapsula y reutiliza lógica reactiva. Este tipo de funciones aprovechan las APIs de composición de Vue, como ref y reactive, para manejar el estado y la reactividad de manera modular.

A continuación, desarrollaremos un ejemplo básico de un composable que maneja el estado de un contador. Este composable incluirá tanto la lógica para incrementar y decrementar el contador como el estado reactivo que mantiene el valor actual del contador.

Primero, creamos el composable useCounter en un archivo JavaScript o Typescript separado (lo más recomendable sería crear una carpeta composables dentro del src de nuestro proyecto, donde se ubicarian todos los composables que creemos). Este archivo podría llamarse useCounter.js:

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0); // Estado reactivo del contador

  function increment() {
    count.value++; // Incrementar el contador
  }

  function decrement() {
    count.value--; // Decrementar el contador
  }

  return {
    count,
    increment,
    decrement
  };
}

Este composable define un estado reactivo count utilizando ref. Las funciones increment y decrement modifican este estado. La función useCounter retorna un objeto que expone tanto el estado como las funciones para modificarlo, permitiendo que otros componentes puedan utilizar esta lógica de manera sencilla.

Para utilizar este composable en un componente Vue, podemos importar y llamar la función useCounter dentro de la función setup del componente. Aquí hay un ejemplo de cómo hacerlo:

<template>
  <div>
    <p>Contador: {{ count }}</p>
    <button @click="increment">Incrementar</button>
    <button @click="decrement">Decrementar</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, decrement } = useCounter(); // Llamada al composable

    return {
      count,
      increment,
      decrement
    };
  }
};
</script>

En este ejemplo, el componente Vue utiliza el composable useCounter dentro de la función setup. Esto permite que el componente acceda al estado count y a las funciones increment y decrement, vinculándolos a su plantilla.

Los composables no solo permiten una mejor organización y reutilización del código, sino que también facilitan la prueba de la lógica de negocio de manera aislada. Para probar el composable useCounter, se puede escribir una prueba unitaria que verifique el comportamiento esperado de las funciones increment y decrement.

Uso de reactive en Composables

El método reactive de Vue se utiliza para crear un objeto reactivo que puede contener propiedades anidadas. A diferencia de ref, que crea una referencia reactiva a un valor primitivo, reactive es ideal para manejar objetos complejos y estructuras de datos más profundas. En el contexto de composables, reactive permite encapsular y gestionar estados más complejos dentro de una función reutilizable.

Para ilustrar el uso de reactive en un composable, consideremos un ejemplo en el que queremos gestionar un formulario con múltiples campos. Crearemos un composable llamado useForm que maneje el estado del formulario y proporcione funciones para actualizar y resetear los campos.

// useForm.js
import { reactive } from 'vue';

export function useForm() {
  const form = reactive({
    username: '',
    email: '',
    password: ''
  });

  function updateField(field, value) {
    form[field] = value;
  }

  function resetForm() {
    form.username = '';
    form.email = '';
    form.password = '';
  }

  return {
    form,
    updateField,
    resetForm
  };
}

En este ejemplo, form es un objeto reactivo que contiene tres propiedades: username, email y password. La función updateField permite actualizar cualquier campo del formulario, mientras que resetForm restablece todos los campos a sus valores iniciales.

Para utilizar este composable en un componente Vue, lo importamos y lo llamamos dentro de la función setup del componente. Aquí hay un ejemplo de cómo hacerlo:

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="username">Username:</label>
      <input id="username" v-model="form.username" />
    </div>
    <div>
      <label for="email">Email:</label>
      <input id="email" v-model="form.email" />
    </div>
    <div>
      <label for="password">Password:</label>
      <input id="password" type="password" v-model="form.password" />
    </div>
    <button type="submit">Submit</button>
    <button type="button" @click="resetForm">Reset</button>
  </form>
</template>

<script>
import { useForm } from './useForm';

export default {
  setup() {
    const { form, updateField, resetForm } = useForm();

    function submitForm() {
      // Aquí iría la lógica para enviar el formulario
      console.log('Form submitted:', form);
    }

    return {
      form,
      updateField,
      resetForm,
      submitForm
    };
  }
};
</script>

En este componente, utilizamos v-model para enlazar los campos del formulario a las propiedades del objeto reactivo form. Al hacer esto, Vue se encarga de actualizar automáticamente el estado reactivo cada vez que el usuario interactúa con los campos del formulario. Las funciones resetForm y submitForm se vinculan a los botones correspondientes para gestionar las acciones del formulario.

El uso de reactive en composables es particularmente útil cuando se necesita manejar estados complejos y anidados. Permite una gestión del estado más intuitiva y coherente, ya que las actualizaciones en el objeto reactivo se reflejan automáticamente en la interfaz de usuario. Además, al encapsular esta lógica en un composable, se facilita la reutilización y el mantenimiento del código, especialmente en aplicaciones grandes y complejas.

Uso de computed en Composables

En Vue, las propiedades computed se utilizan para declarar valores derivados que dependen de otros valores reactivos. Estas propiedades se recalculan automáticamente cuando cambian los valores de los que dependen, ofreciendo una forma eficiente de gestionar la lógica derivada sin necesidad de volver a calcular manualmente los valores. En el contexto de los composables, computed se utiliza para encapsular y reutilizar esta lógica derivada de manera modular.

Para ilustrar el uso de computed en un composable, consideremos un ejemplo en el que necesitamos calcular el estado derivado basado en un contador reactivo. Crearemos un composable llamado useEnhancedCounter que extiende el composable useCounter para incluir una propiedad computada que indique si el contador es par o impar.

// useEnhancedCounter.js
import { ref, computed } from 'vue';

export function useEnhancedCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  const isEven = computed(() => count.value % 2 === 0);

  return {
    count,
    increment,
    decrement,
    isEven
  };
}

En este ejemplo, isEven es una propiedad computada que depende del valor reactivo count. La función computed recibe una función que retorna true si count es par y false si es impar. Esta propiedad se recalculará automáticamente cada vez que count cambie.

Para utilizar este composable en un componente Vue, lo importamos y lo llamamos dentro de la función setup del componente. Aquí hay un ejemplo de cómo hacerlo:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Is Even: {{ isEven }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useEnhancedCounter } from './useEnhancedCounter';

export default {
  setup() {
    const { count, increment, decrement, isEven } = useEnhancedCounter();

    return {
      count,
      increment,
      decrement,
      isEven
    };
  }
};
</script>

En este componente, además de mostrar el valor del contador count, también mostramos si el contador es par o impar utilizando la propiedad computada isEven. Cada vez que se incrementa o decrementa el contador, isEven se recalculará automáticamente.

El uso de computed en composables permite encapsular lógica derivada de manera modular y reutilizable. Esto no solo reduce la repetición de código, sino que también mejora la claridad y mantenibilidad del código al separar la lógica derivada de la lógica principal. Además, las propiedades computadas ofrecen un rendimiento optimizado, ya que solo se recalculan cuando es necesario, mejorando así la eficiencia de la aplicación.