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.
últimas postagens
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. Os mixins continham 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 à propriedade mixins dentro do objeto de opções do componente. Por exemplo:
export const 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.';
}
return Object.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 – formData e formErrors – inicialmente definidas 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, activateForm(), 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>
<label for="username">Username:</label>
<input type="text" id="username" v-model="formData.username" />
<span class="error">{{ formErrors.username }}</span>
</div><div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="formData.password" />
<span class="error">{{ formErrors.password }}</span>
</div><button type="submit">Submit</button>
</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. A propriedade mixins inclui todos os mixins que você importou. Nesse caso, o componente usa o método activateForm do mixin formValidation 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 a API de composição do Vue em 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 diretório src do seu projeto 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 mixin formValidation como um elemento que pode ser composto:
import { reactive } from 'vue';export function useFormValidation() {
const state = reactive({
formData: {
username: '',
password: '',
},
formErrors: {
username: '',
password: '',
},
});function validateForm() {
state.formErrors = {};if (!state.formData.username.trim()) {
state.formErrors.username="Username is required.";
}if (!state.formData.password.trim()) {
state.formErrors.password = 'Password is required.';
}return Object.keys(state.formErrors).length === 0;
}return {
state,
validateForm,
};
}
Este trecho começa importando a função reativa do pacote vue. Em seguida, ele cria uma função exportável, useFormValidation().
Ele continua criando uma variável reativa, state, 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 esse elemento que pode ser composto importando a função JavaScript do arquivo no seu componente:
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="state.formData.username" />
<span class="error">{{ state.formErrors.username }}</span>
</div><div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="state.formData.password" />
<span class="error">{{ state.formErrors.password }}</span>
</div><button type="submit">Submit</button>
</form>
</div>
</template><script setup>
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, esse código desestrutura o objeto JavaScript que 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 a lógica em aplicativos Vue.js, facilitando a construção de aplicativos da web escalonáveis com o Vue.