Cómo reutilizar la lógica en Vue.js con Composables

Al programar, es importante estructurar su código base para poder reutilizarlo siempre que sea posible. La duplicación de código puede inflar la base del código y complicar la depuración, especialmente en aplicaciones más grandes.

Vue simplifica la reutilización de código mediante elementos componibles. Los elementos componibles son funciones que encapsulan la lógica y puedes reutilizarlas en tu proyecto para manejar funcionalidades similares.

¿Siempre fueron Composables?

Antes de que Vue 3 introdujera los componibles, podías usar mixins para capturar código y reutilizarlo en diferentes partes de tu aplicación. Mezclas contenidas Opciones de Vue.js como datos, métodos y enlaces de ciclo de vida, lo que permite la reutilización de código en múltiples componentes.

Para crear mixins, los estructura en archivos separados y luego los aplica a los componentes agregando el mixin al mezclas propiedad dentro del objeto de opciones del componente. Por ejemplo:

// formValidation.js
exportconst formValidationMixin = {
 data() {
return {
 formData: {
 username: '',
 password: '',
 },
 formErrors: {
 username: '',
 password: '',
 },
 };
 },
 methods: {
 validateForm() {
this.formErrors = {};

if (!this.formData.username.trim()) {
this.formErrors.username = 'Username is required.';
 }

if (!this.formData.password.trim()) {
this.formErrors.password = 'Password is required.';
 }

returnObject.keys(this.formErrors).length 0;
 },
 },
};

Este fragmento de código muestra el contenido de un mixin para validar formularios. Este mixin alberga dos propiedades de datos:formularioDatos y errores de formulario: inicialmente configurado con valores vacíos.

formData almacena datos de entrada para el formulario, incluidos los campos de nombre de usuario y contraseña inicializados como vacíos. formErrors refleja esta estructura para contener posibles mensajes de error, también inicialmente vacíos.

El mixin también contiene un método, validarForm(), para comprobar que los campos de nombre de usuario y contraseña no están vacíos. Si alguno de los campos está vacío, completa la propiedad de datos formErrors con un mensaje de error apropiado.

El método regresa verdadero para un formulario válido, cuando formErrors está vacío. Puede usar el mixin importándolo a su componente Vue y agregándolo a la propiedad mixin del objeto Opciones:

<template>
<div>
<form @submit.prevent="submitForm">
<div>
<labelfor="username">Username:label>
<inputtype="text"id="username"v-model="formData.username" />
<spanclass="error">{{ formErrors.username }}span>
div>
<div>
<labelfor="password">Password:label>
<inputtype="password"id="password"v-model="formData.password" />
<spanclass="error">{{ formErrors.password }}span>
div>
<buttontype="submit">Submitbutton>
form>
div>
template>
<script>
import { formValidation } from "./formValidation.js";
export default {
 mixins: [formValidation],
 methods: {
 submitForm() {
 if (this.validateForm()) {
 alert("Form submitted successfully!");
 } else {
 alert("Please correct the errors in the form.");
 }
 },
 },
};
script>
<style>
.error {
 color: red;
}
style>

Este ejemplo muestra un componente de Vue escrito utilizando el enfoque de objeto Opciones. El mezclas La propiedad incluye todos los mixins que has importado. En este caso, el componente utiliza el método validarForm del formularioValidación mixin para informar al usuario si el envío del formulario fue exitoso.

Cómo utilizar componentes componibles

Un elemento componible es un archivo JavaScript autónomo con funciones adaptadas a inquietudes o requisitos específicos. Puedes aprovechar API de composición de Vue dentro de un elemento componible, utilizando características como referencias y referencias calculadas.

Este acceso a la API de composición le permite crear funciones que se integran en varios componentes. Estas funciones devuelven un objeto, que puede importar e incorporar fácilmente a los componentes de Vue a través de la función de configuración de la API de composición.

Cree un nuevo archivo JavaScript en el archivo de su proyecto. src directorio para usar un componible. Para proyectos más grandes, considere organizar una carpeta dentro de src y crear archivos JavaScript separados para diferentes elementos componibles, asegurándose de que el nombre de cada elemento componible refleje su propósito.

Dentro del archivo JavaScript, defina la función que necesita. He aquí una reestructuración del formularioValidación mixin como componible:

// formValidation.js
import { reactive } from'vue';
exportfunctionuseFormValidation() {
const state = reactive({
 formData: {
 username: '',
 password: '',
 },
 formErrors: {
 username: '',
 password: '',
 },
 });
functionvalidateForm() {
 state.formErrors = {};
if (!state.formData.username.trim()) {
 state.formErrors.username = 'Username is required.';
 }
if (!state.formData.password.trim()) {
 state.formErrors.password = 'Password is required.';
 }
returnObject.keys(state.formErrors).length 0;
 }
return {
 state,
 validateForm,
 };
}

Este fragmento comienza importando la función reactiva del vista paquete. Luego crea una función exportable, utilizarValidación de formulario().

Continúa creando una variable reactiva, estado, que alberga las propiedades formData y formErrors. Luego, el fragmento maneja la validación del formulario con un enfoque muy similar al mixin. Finalmente, devuelve la variable de estado y la función validarForm como un objeto.

Puedes usar este componible por importando la función JavaScript desde el archivo en tu componente:

<template>
<div>
<form @submit.prevent="submitForm">
<div>
<labelfor="username">Username:label>
<inputtype="text"id="username"v-model="state.formData.username" />
<spanclass="error">{{ state.formErrors.username }}span>
div>
<div>
<labelfor="password">Password:label>
<inputtype="password"id="password"v-model="state.formData.password" />
<spanclass="error">{{ state.formErrors.password }}span>
div>
<buttontype="submit">Submitbutton>
form>
div>
template>
<scriptsetup>
import { useFormValidation } from "./formValidation.js";
import { ref } from "vue";
const { state, validateForm } = useFormValidation();
const submitForm = () => {
 if (validateForm()) {
 alert("Form submitted successfully!");
 } else {
 alert("Please correct the errors in the form.");
 }
};
script>
<style>
.error {
 color: red;
}
style>

Después de importar el elemento componible useFormValidation, este código desestructura el objeto JavaScript regresa y continúa con la validación del formulario. Alerta si el formulario enviado es exitoso o tiene errores.

Los composables son los nuevos mixins

Si bien los mixins fueron útiles en Vue 2 para la reutilización de código, los componibles los reemplazaron en Vue 3. Los componibles proporcionan un enfoque más estructurado y fácil de mantener para reutilizar la lógica en aplicaciones Vue.js, lo que facilita la creación de aplicaciones web escalables con Vue.