Composables são uma atualização simples para mixins que você deve começar a usar com seus aplicativos Vue 3 imediatamente.
Ao programar, é importante estruturar sua base de código para que você reutilize o código sempre que possível. A duplicação de código pode sobrecarregar a base de código e complicar a depuração, especialmente em aplicativos maiores.
Vue simplifica a reutilização de código por meio de elementos que podem ser compostos. Composables são funções que encapsulam lógica e você pode reutilizá-los em seu projeto para lidar com funcionalidades semelhantes.
Sempre foi combinável?
Antes do Vue 3 introduzir os elementos que podem ser compostos, você podia usar mixins para capturar código e reutilizá-lo em diferentes partes do seu aplicativo. Mixins contidos Opções do Vue.js, como dados, métodos e ganchos de ciclo de vida, permitindo a reutilização de código em vários componentes.
Para criar mixins, você os estrutura em arquivos separados e depois os aplica aos componentes adicionando o mixin ao arquivo mixins propriedade dentro do objeto de opções do componente. Por exemplo:
// 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 trecho de código mostra o conteúdo de um mixin para validação de formulários. Este mixin abriga duas propriedades de dados—formulárioData e erros de formulário—inicialmente definido com valores vazios.
formData armazena dados de entrada para o formulário, incluindo campos de nome de usuário e senha inicializados como vazios. formErrors espelha essa estrutura para conter possíveis mensagens de erro, também inicialmente vazias.
O mixin também contém um método, validarForm(), para verificar se os campos de nome de usuário e senha não estão vazios. Se um dos campos estiver vazio, ele preencherá a propriedade de dados formErrors com uma mensagem de erro apropriada.
O método retorna verdadeiro para um formulário válido, quando formErrors está vazio. Você pode usar o mixin importando-o para seu componente Vue e adicionando-o à propriedade mixin do objeto Options:
<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 exemplo mostra um componente Vue escrito usando a abordagem de objeto Options. O mixins propriedade inclui todos os mixins que você importou. Neste caso, o componente utiliza o método validForm do formulárioValidação mixin para informar ao usuário se o envio do formulário foi bem-sucedido.
Como usar elementos que podem ser compostos
Um elemento que pode ser composto é um arquivo JavaScript independente com funções adaptadas a preocupações ou requisitos específicos. Você pode aproveitar API de composição do Vue dentro de um elemento que pode ser composto, usando recursos como refs e refs computadas.
Este acesso à API de composição permite criar funções que se integram em vários componentes. Essas funções retornam um objeto, que você pode importar e incorporar prontamente nos componentes Vue por meio da função de configuração da API Composition.
Crie um novo arquivo JavaScript no arquivo do seu projeto fonte diretório para usar um elemento que pode ser composto. Para projetos maiores, considere organizar uma pasta em src e criar arquivos JavaScript separados para diferentes elementos que podem ser compostos, garantindo que o nome de cada elemento que pode ser composto reflita sua finalidade.
Dentro do arquivo JavaScript, defina a função necessária. Aqui está uma reestruturação do formulárioValidação mixin como um elemento que pode ser composto:
// 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 trecho começa importando a função reativa do vue pacote. Em seguida, ele cria uma função exportável, useFormValidation().
Ele continua criando uma variável reativa, estado, que abriga as propriedades formData e formErrors. O snippet então lida com a validação do formulário com uma abordagem muito semelhante ao mixin. Por fim, retorna a variável de estado e a função validForm como um objeto.
Você pode usar este elemento que pode ser composto por importando a função JavaScript do arquivo no seu 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>
Depois de importar o elemento que pode ser composto useFormValidation, este código desestrutura o objeto JavaScript ele retorna e continua com a validação do formulário. Alerta se o formulário enviado foi bem-sucedido ou contém erros.
Composables são os novos mixins
Embora os mixins fossem úteis no Vue 2 para reutilização de código, os elementos que podem ser compostos os substituíram no Vue 3. Os elementos que podem ser compostos fornecem uma abordagem mais estruturada e sustentável para reutilizar lógica em aplicações Vue.js, facilitando a construção de aplicações web escaláveis com Vue.