Cách tái sử dụng logic trong Vue.js với các thành phần kết hợp

Composable - Các thành phần kết hợp là một nâng cấp đơn giản mà bạn nên dùng với các app tạo bằng Vue 3 ngay lập tức. Dưới đây là hướng dẫn chi tiết.

Khi lập trình, điều quan trọng bạn cần thiết lập cấu trúc codebase để tái sử dụng code bất cứ khi nào có thể. Sao chép có thể khiến codebase trở nên cồng kềnh và gỡ lỗi phức tạp hơn, nhất là ở những ứng dụng lớn hơn.

Vue đơn giản hóa quá trình tái sử dụng code qua các thành phần kết hợp. Composable là những hàm đóng gói logic, và bạn có thể tái sử dụng chúng trên dự án để xử lý chức năng tương tự.

Trước Vue 3 đã giới thiệu composable, bạn có thể dùng mixin để thu thập code và tái sử dụng nó trong các phần khác nhau của ứng dụng. Mixin chứa những tùy chọn Vue.js như dữ liệu, phương thức và hook chu kỳ sản phẩm, cho phép tái sử dụng code trên nhiều thành phần.

Để tạo mixin, bạn tạo cấu trúc cho chung theo từng file riêng, sau đó đưa chúng và các thành phần bằng cách thêm kết hợp vào thuộc tính mixins trong đối tượng lựa chọn của thành phần đó. Ví dụ:

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

Đoạn code này hiện nội dung của mixin cho xác thực biểu mẫu. Sự kết hợp này chứa hai thuộc tính dữ liệu - fromData và formErrors - thiết lập ban đầu sang các giá trị trống.

formData chứa dữ liệu đầu vào cho biểu mẫu này, bao gồm trường tên người dùng và mật khẩu được khởi tạo dưới dạng trống. formErrors thể hiện cấu trúc này để chứa thông báo lỗi tiềm ẩn, ban đầu cũng trống.

Mixin cũng chứa một phương thức, validateForm(), để kiểm tra xem tên người dùng và mật khẩu có trống hay không. Nếu một trong hai trường trống, nó điền thuộc tính dữ liệu formErrors cùng một thông báo lỗi phù hợp.

Phương thức này trả về true cho một biểu mẫu hợp lệ, khi formErrors trống. Bạn có thể dùng mixin bằng cách nhập nó vào thành phần Vue và thêm nó vào thuộc tính mixin của đối tượng 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>

Ví dụ này hiện một thành phần Vue được viết bằng phương pháp đối tượng Options. Thuộc tính mixins bao gồm toàn bộ mixin bạn đã nhập. Trong trường hợp này, thành phần đó sử dụng phương thức validateForm từ mixin formValidation để thông báo cho người dùng biết việc gửi biểu mẫu có thành công hay không.

Cách dùng các thành phần có thể kết hợp

Thành phần kết hợp là một file JavaScript độc lập với các hàm được điều chỉnh cho phù hợp với mối quan tâm hoặc yêu cầu cụ thể. Bạn có thể tận dụng API tổng hợp của Vue trong một thành phần kết hợp bằng cách sử dụng những tính năng như refs và refs được tính toán.

Quyền truy cập vào API thành phần cho phép bạn tạo các hàm tích hợp vào nhiều thành phần khác nhau. Những hàm này trả về một đối tượng mà bạn có thể nhập và kết hợp ngay vào các thành phần Vue qua hàm thiết lập của Composition API.

Tạo một file JavaScript mới trong thư mục src để dùng một thành phần có thể kết hợp. Đối với dự án lớn hơn, hãy cân nhắc sắp xếp một thư mục trong src và tạo file JavaScript riêng cho các thành phần có thể kết hợp khác nhau, đảm bảo đặt tên thể hiện rõ mục đích sử dụng của chúng.

Bên trong file JavaScript, xác định hàm bạn cần. Đây là bản tái cấu trúc của mixin formValidation dưới dạng một thành phần kết hợp:

// 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ạn này bắt đầu bằng cách nhập hàm phản ứng từ package vue. Sau đó, nó tạo một hàm có thể xuất, useFormValidation().

Nó hoạt động liên tục bằng cách tạo một biến phản ứng, state, chứa thuộc tính formData và formErrors. Đoạn này sau đó xử lý xác thực biểu mẫu bằng phương pháp rất giống mixin. Cuối cùng, nó trả về biến trạng thái và hàm validateForm là một đối tượng.

Bạn có thể dùng thành phần có thể kết hợp bằng cách nhập hàm JavaScript từ file trong thành phần của bạn:

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

Sau khi nhập thành phần có thể kết hợp useFormValidation, code này sẽ hủy cấu trúc đối tượng JavaScript mà nó trả về và tiếp tục xác thực biểu mẫu. Nó thông báo liệu biểu mẫu đã gửi thành công hay phát sinh lỗi.

Trong khi mixin hữu ích ở Vue 2 cho việc tái sử dụng code, các thành phần kết hợp - composable đã được thay thế cho chúng ở Vue 3. Composable cung cấp phương pháp dễ bảo trì và có cấu trúc hơn để tái sử dụng logic ở ứng dụng Vue.js, khiến nó dễ xây dựng app web có thể mở rộng hơn với Vue.

Hi vọng bài viết hữu ích với các bạn!