Como reutilizar a lógica em Vue.js com Composables

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 inchar a base de código e complicar a depuração, especialmente em aplicativos maiores.

O Vue facilita a reutilização de código por meio de elementos compostáveis. Estes elementos são essencialmente funções que englobam um conjunto específico de lógica, permitindo assim a sua integração perfeita em vários componentes de um único projeto, de modo a abordar funcionalidades comparáveis.

Sempre foram compostáveis?

Antes da introdução dos composables no Vue 3, os programadores utilizavam mixins para extrair código reutilizável e aplicá-lo nas suas aplicações. Estes mixins incluíam uma gama de configurações Vue.js, incluindo propriedades de dados, metodologias e ciclos de vida de componentes, facilitando a partilha extensiva de código entre vários elementos.

Para implementar mixins, normalmente organizamo-los em ficheiros individuais e incorporamo-los em componentes, incluindo-os como parte da propriedade “mixins” do componente nas suas definições de opções associadas. Como ilustração, considere o seguinte trecho de código:

 // formValidation.js
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 segmento de código exibe os constituintes de um mixin que é utilizado para verificar formulários. O referido mixin inclui dois atributos de dados - formData e formErrors - aos quais são inicialmente atribuídos valores nulos ou vazios.

O mecanismo de armazenamento conhecido como formData é responsável por preservar a informação submetida através de um formulário web, que inclui campos em branco designados para nomes de utilizador e palavras-passe. Da mesma forma, a variável formErrors foi criada com uma estrutura idêntica para acomodar eventuais mensagens de erro que possam surgir, sendo ambas inicializadas sem conteúdo à partida.

O mixin incorpora um método conhecido como validateForm() , que serve para verificar se os campos de introdução de nome de utilizador e palavra-passe foram preenchidos ou não. No caso de um destes campos estar vazio, a função preenche o atributo formErrors com uma notificação de erro adequada.

A implementação assegura que o método produz um valor booleano de verdadeiro quando não existem erros na estrutura de dados formErrors. Para utilizar esta funcionalidade num componente Vue.js, é possível importar o módulo relevante que contém a função reactiveMixin e incorporá-la como parte da propriedade mixin do objeto Options. Esta integração permite que o componente aproveite os benefícios proporcionados pela função reactiveMixin, que inclui a deteção automática de erros e a sincronização com os componentes principais após alterações nos valores de entrada.

 <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>

Neste caso, observamos um componente Vue que emprega a estratégia de objeto Options. A mistura de propriedades engloba todos os mixin que foram importados para utilização dentro da construção dada. Especificamente, o componente utiliza a função validateForm derivada do mixin formValidation, para informar o utilizador final sobre o resultado da submissão do formulário, nomeadamente se foi executado com sucesso ou não.

Como utilizar os compostáveis

Um compostável é um módulo JavaScript autónomo que engloba uma funcionalidade personalizada para necessidades ou objectivos específicos. Ele permite aproveitar os recursos da API de composição do Vue dentro de seus limites, utilizando recursos como variáveis reativas e valores computados.

A utilização deste ponto de acesso permite o desenvolvimento de funções que interagem sem problemas com uma multiplicidade de elementos. Essas funções geram uma entidade, que pode ser facilmente importada e assimilada nos componentes Vue através da fase de configuração fornecida pela API de composição.

Para utilizar um elemento composable no seu projeto, é necessário criar um novo ficheiro JavaScript no diretório “src” do seu projeto. Nos casos em que o projeto requer uma organização a um nível mais granular, pode optar-se por estabelecer uma subpasta dentro do diretório “src” e designar ficheiros JavaScript individuais para vários elementos compostáveis. É essencial que o nome de ficheiro designado para cada composable represente com precisão a sua função ou objetivo pretendido.

Para criar um componente reutilizável e modular para validação de formulários em JavaScript, é necessário definir primeiro uma função no ficheiro de script que encapsule toda a lógica e funcionalidade relevantes. Ao reestruturar o mixin FormValidation dessa maneira, podemos obter maior flexibilidade e facilidade de uso ao implementar a validação de formulário em vários projetos ou aplicativos.

 // formValidation.js
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,
  };
}

O trecho de código fornecido importa uma função reativa do pacote Vue e, em seguida, desenvolve um exportador, chamado useFormValidation() , que serve para gerenciar a validação de formulário no aplicativo.

O código define uma variável reactiva chamada state , que armazena as propriedades formData e formErrors no seu âmbito. Isto permite um acesso conveniente a estes valores durante a submissão e a inicialização do formulário. Posteriormente, o snippet aplica uma metodologia muito semelhante à exibida pelo mixin mencionado anteriormente para gerenciar o processo de validação do formulário.Em última análise, o resultado é a disponibilização da variável state e da função validateForm como uma entidade combinada.

A incorporação da função JavaScript do ficheiro especificado no seu componente pode ser conseguida através do processo de importação no ficheiro relevante.

 <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>

Após a introdução do componente funcional useFormValidation , a presente implementação procede à desconstrução de um objeto JavaScript que foi importado juntamente com o referido componente. Este processo permite a continuação dos procedimentos de validação de formulários dentro da aplicação. Posteriormente, o programa anexa um alerta detalhando o resultado da submissão bem sucedida ou quaisquer erros prevalecentes detectados durante a fase de avaliação.

Os compostáveis são os novos mixins

Os compostáveis Vue representam uma melhoria em relação aos mixins, pois oferecem um método mais organizado e sustentável de reciclagem de funcionalidades em projetos Vue.js. Isto permite que os programadores criem aplicações Web de maior escala sem esforço, utilizando as vantagens fornecidas pelo Vue.