Uso de Composables en Vue para Reutilización de Lógica

Contenido del curso

Conceptos básicos de Vue

Reactividad en Vue

Composición en Vue

Manejo de eventos e inputs

Optimización en Vue

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:44

Uso de Composables en Vue para Reutilización de Lógica

Curso de Vue.js

Clase 29 de 34

Clase 29 / 34

Recursos

¿Qué es un Composable y cómo puede ayudarme?

Los Composables son fragmentos de código reutilizables que te permiten aislar lógica compartida en tus proyectos Vue, siguiendo la práctica de "don't repeat yourself" (DRY). A medida que desarrollas una aplicación web que crece con el tiempo, es común encontrar lógica repetida en múltiples componentes. Los Composables te permiten encapsular esta lógica de manera que puedas utilizarla en varios lugares de tu aplicación sin tener que copiar y pegar el mismo código continuamente.

¿Cómo crear un Composable en Vue?

Para crear un Composable, debes seguir algunos pasos clave:

Crea una carpeta para Composables: Dentro de tu carpeta src, crea una subcarpeta llamada Composables. Aquí es donde almacenarás tus Composables.
Crea el Composable: Dentro de esta carpeta, crea un archivo con el nombre de tu Composable. Por ejemplo, para una función de obtención de datos, podrías llamar al archivo useFetch.js.

Define la función del Composable: En el archivo del Composable, exporta una función que recibirá los parámetros necesarios. Por ejemplo:

export function useFetch(apiUrl, onSuccess = () => {}) {
    const state = /* lógica para manejar el estado */;
    // Lógica para la petición a la API
    onSuccess(responseJson);
    return { state };
}

Aisla y generaliza la lógica de tu componente: Mueve la lógica compartida de tu componente original al Composable. Por ejemplo, si tienes una función para obtener datos de una API, trasládala al Composable.
Importa y usa el Composable en tus componentes: Cuando necesites usar esta lógica en un componente, importa el Composable y úsalo según sea necesario.

¿Cómo asegurar que el Composable se use correctamente?

Al importar y usar un Composable, es importante considerar:

Manejo del estado: Cuando declares un estado dentro de un Composable, asegúrate de retornarlo para que pueda ser utilizado en el componente importador.
Parámetros adecuados: Asegúrate de pasar todos los parámetros necesarios al Composable. En el caso de useFetch, esto incluye la URL de la API y la función de callback.
Manejo de ciclos de vida: Cuando trabajes con ciclos de vida dentro de Composables, como el uso de onMounted, ten cuidado de no causar efectos secundarios indeseados o renders múltiples innecesarios al manipular el estado.

¿Cómo manejar los estados de carga y errores?

El manejo de estados de carga y errores es fundamental para ofrecer una buena experiencia de usuario. Puedes integrar indicadores de carga y mensajes de error de manera eficiente utilizando directivas y componentes predefinidos, como el SharedLoader mencionado en el ejemplo:

Indicador de carga: Importa un componente de carga y úsalo junto con una variable (state.isLoading) para mostrar el indicador mientras esperas la respuesta de la API.
```
<template>
  <SharedLoader v-if="state.isLoading" />
  <GamesLayout v-else />
</template>
```

Precauciones al usar Composables

Es importante no abusar de los Composables, especialmente al incluir ciclos de vida de Vue, pues podrían generar estados no deseados y múltiples redibujados. Usa Composables para aislar lógica común, pero siempre evalúa su impacto en el rendimiento y la claridad del código.

Por último, te animo a experimentar con Composables en tu aplicación. Intenta identificar lógica repetitiva que puedas encapsular, y observa cómo se simplifica y organiza tu código. ¡Deja en los comentarios tus aplicaciones de este patrón!

Bryan Castano

Hace un año

My ./src/composables/useFetch.js :

import { ref, onMounted, reactive } from 'vue';

/**
 * Composable para obtener datos de una API.
 * @param {string} url La URL de la API a consultar.
 * @returns {{data: Ref<Array>, isLoading: Ref<boolean>, error: Ref<Error|null>}}
 */

export function useFetch( gamesUrl ) {
// 1. Estado para datos y carga
  // set reactive state
  const data = ref([]);
  const isLoading = ref(false);
  const error = ref(null);

// 2. Estado para el término de búsqueda (nueva)
  const fetchData = async () => {

    isLoading.value = true;
    error.value = null; /// reset the error every attempt..

    try {

      const response = await fetch( gamesUrl );

      //handler HTTP ERROR  like 404, or 500 ...
      // check if response is not ok
      if (  !response.ok  ) {
        throw new Error(`ERROR HTTP : ${response.status} - ${response.statusText}` );

      }
      //parse the JSON data
      // may also throw if the JSON is invalid
      const GameData = await response.json();
      data.value = GameData;
    } catch (err) {
      console.error( 'Fetch Error:', err );
      error.value = err;
    } finally {
      isLoading.value = false;
    }
  };

  onMounted( () => {
    fetchData();

  })

  return { data, isLoading, error };
}

Yo la aplico por aqui en App.vue:

import { useFetch } from './composables/useFetch';

const API_URL = 'https://gamestreamapi.herokuapp.com/api/games';

const { data: allGamesData, isLoading, error } = useFetch(API_URL);

Conceptos básicos de Vue

Gráfica de barras reactiva con Vue.js

Creación de un Proyecto Vue desde Cero

Estructura de un Single File Component en Vue

Fundamentos de Vue.js: Montaje y Virtual DOM

Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass

Agregar estilos globales y scripts en aplicaciones Vue.js

Sintaxis Vue: v-bind y dobles corchetes

Props y Comunicación entre Componentes en VueJS

Validación de props en Vue con tipos y reglas

Vue 3: Uso y Ventajas de la Composition API

Reactividad en Vue

Reactividad en Vue con ref

Reactividad con `ref` en Vue 3: Creación y Uso Práctico

Uso de Watchers en Vue para Controlar Estados Reactivos

Computed properties en Vue y su caché

v-if vs v-show no Vue explicados

Ciclos de Vida de Componentes en Vue 3: Guía Completa

Composición en Vue

Pensamiento por componentes en Vue

Consumir una API con reactive en Vue

Diferencias entre reactive y ref en Vue 3

Renderizar listas con v-for en Vue

Slots y named slots en Vue

Herencia de Atributos en Componentes Vue: Uso y Ejemplos Prácticos

Manejo de eventos e inputs

Manejo de Inputs y Estado con VModel en Vue.js

Eventos y Modificadores en Vue: Focus y Blur en Searchbar

Eventos EMIT en Vue: Comunicación entre Componentes

Optimización en Vue

Componentes dinámicos con la tag component

Implementación de Modales y Manejo de Estado Global en Vue.js

Uso de Teleport en Vue para Optimizar el Renderizado de Modales

Uso de Composables en Vue para Reutilización de Lógica

refs en Vue para acceder al DOM real

Virtual DOM en Vue: Funcionamiento y Beneficios

Despliegue

Despliegue de Aplicaciones Vue: De Desarrollo a Producción

Cómo desplegar Vue en Netlify con GitHub

Despliegue de Aplicaciones Web con GitHub Actions y Pages

Uso de Composables en Vue para Reutilización de Lógica