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

Khi lập trình, điều quan trọng là phải cấu trúc cơ sở mã của bạn để bạn có thể sử dụng lại mã nếu có thể. Mã trùng lặp có thể làm cồng kềnh cơ sở mã và làm phức tạp việc gỡ lỗi, đặc biệt là trong các ứng dụng lớn hơn.

Vue tạo điều kiện cho việc sử dụng lại mã bằng các phần tử có thể kết hợp được. Các phần tử này về cơ bản là các chức năng bao gồm một bộ logic cụ thể, do đó cho phép chúng tích hợp liền mạch giữa các thành phần khác nhau trong một dự án để giải quyết các chức năng tương đương.

Nó luôn có thể kết hợp được phải không?

Trước khi giới thiệu các thành phần kết hợp trong Vue 3, các nhà phát triển đã sử dụng mixin để trích xuất mã có thể tái sử dụng và áp dụng mã đó trong các ứng dụng của họ. Các mixin này bao gồm một loạt cấu hình Vue.js, bao gồm các thuộc tính dữ liệu, phương pháp và vòng đời thành phần, tạo điều kiện thuận lợi cho việc chia sẻ mã rộng rãi giữa các thành phần khác nhau.

Để triển khai mixin, người ta thường tổ chức chúng thành các tệp riêng lẻ và kết hợp chúng vào các thành phần bằng cách đưa chúng vào như một phần thuộc tính “mixins” của thành phần trong cài đặt tùy chọn liên quan của nó. Để minh họa, hãy xem xét đoạn mã sau:

 // 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 mã này thể hiện các thành phần của mixin được sử dụng để xác minh biểu mẫu. Mixin đã nói bao gồm hai thuộc tính dữ liệu-formData và formErrors-ban đầu được gán giá trị null hoặc void.

Cơ chế lưu trữ được gọi là formData chịu trách nhiệm lưu giữ thông tin được gửi qua biểu mẫu web, bao gồm các trường trống được chỉ định cho tên người dùng và mật khẩu. Tương tự, biến formErrors đã được tạo với cấu trúc giống hệt nhau để chứa bất kỳ thông báo lỗi nào có thể phát sinh, với cả hai đều được khởi tạo dưới dạng vô hiệu nội dung ngay từ đầu.

Mixin kết hợp một phương thức được gọi là validForm() , dùng để xác minh xem các trường nhập tên người dùng và mật khẩu đã được điền hay chưa. Trong trường hợp một trong các trường này bị bỏ trống, hàm sẽ điền vào thuộc tính formErrors một thông báo lỗi thích hợp.

Việc triển khai đảm bảo rằng phương thức này mang lại giá trị Boolean là true khi không có lỗi nào trong cấu trúc dữ liệu formErrors. Để sử dụng chức năng này trong thành phần Vue.js, người ta có thể nhập mô-đun có liên quan chứa hàm ReactiveMixin và kết hợp nó như một phần thuộc tính mixin của đối tượng Tùy chọn. Việc tích hợp này cho phép thành phần tận dụng các lợi ích do hàm ReactiveMixin cung cấp, bao gồm việc tự động phát hiện lỗi và đồng bộ hóa với các thành phần gốc khi thay đổi giá trị đầu vào.

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

Trong trường hợp này, chúng tôi quan sát thấy thành phần Vue sử dụng chiến lược đối tượng Tùy chọn. Sự kết hợp các thuộc tính bao gồm mọi mixin đã được nhập để sử dụng trong cấu trúc nhất định. Cụ thể, thành phần này sử dụng hàm validForm bắt nguồn từ mixin formValidation, để thông báo cho người dùng cuối về kết quả gửi biểu mẫu của họ; cụ thể là liệu nó có được thực hiện thành công hay không.

Cách sử dụng Thành phần kết hợp

Thành phần kết hợp là một mô-đun JavaScript độc lập bao gồm chức năng tùy chỉnh phục vụ cho các nhu cầu hoặc mục tiêu cụ thể. Nó cho phép khai thác các khả năng của Composition API của Vue trong giới hạn của nó bằng cách sử dụng các tài nguyên như biến phản ứng và giá trị được tính toán.

Việc sử dụng điểm truy cập này cho phép phát triển các chức năng có giao diện liền mạch với vô số thành phần. Các hàm đã nói tạo ra một thực thể, có thể được nhập và đồng hóa dễ dàng trong các thành phần Vue thông qua giai đoạn cấu hình do Composition API cung cấp.

Để sử dụng phần tử có khả năng kết hợp trong dự án của bạn, cần phải tạo một tệp JavaScript mới trong thư mục “src” của dự án. Trong trường hợp dự án yêu cầu tổ chức ở cấp độ chi tiết hơn, người ta có thể chọn thiết lập thư mục con trong thư mục “src” và chỉ định các tệp JavaScript riêng lẻ cho các thành phần có thể kết hợp khác nhau. Điều quan trọng là tên tệp được chỉ định của mỗi thành phần kết hợp phải thể hiện chính xác chức năng hoặc mục đích dự định của nó.

Để tạo thành phần mô-đun và có thể tái sử dụng để xác thực biểu mẫu trong JavaScript, trước tiên cần xác định một hàm trong tệp tập lệnh đóng gói tất cả logic và chức năng có liên quan. Bằng cách tái cấu trúc mixin FormValidation theo cách này, chúng tôi có thể đạt được tính linh hoạt và dễ sử dụng cao hơn khi triển khai xác thực biểu mẫu trên nhiều dự án hoặc ứng dụng.

 // 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 mã đã cho sẽ nhập một hàm phản ứng từ gói Vue và sau đó phát triển một trình xuất, có tên là useFormValidation() , dùng để quản lý xác thực biểu mẫu trong ứng dụng.

Mã tiến hành bằng cách xác định một biến phản ứng có tên state, lưu trữ các thuộc tính formData và formErrors trong phạm vi của nó. Điều này cho phép truy cập thuận tiện vào các giá trị này trong cả quá trình gửi và khởi tạo biểu mẫu. Sau đó, đoạn mã áp dụng một phương pháp rất giống với phương pháp được mixin đề cập trước đó thể hiện để quản lý quy trình xác thực của biểu mẫu. Cuối cùng, kết quả là việc cung cấp biến state và hàm `` validForm ` dưới dạng một thực thể kết hợp.

Việc kết hợp chức năng JavaScript từ tệp được chỉ định vào thành phần của bạn có thể đạt được thông qua quá trình nhập trong tệp có liên quan.

 <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 giới thiệu thành phần chức năng useFormValidation, quá trình triển khai hiện tại tiến hành giải cấu trúc một đối tượng JavaScript đã được nhập cùng với thành phần nói trên. Quá trình này cho phép tiếp tục các thủ tục xác thực biểu mẫu trong ứng dụng. Sau đó, chương trình sẽ thêm một cảnh báo nêu chi tiết kết quả của việc gửi thành công hoặc bất kỳ lỗi phổ biến nào được phát hiện trong giai đoạn đánh giá.

Thành phần kết hợp là Mixin mới

Vue Composables thể hiện sự cải tiến so với Mixins vì chúng cung cấp một phương pháp tái chế có tổ chức và bền vững hơn trong các dự án Vue.js. Điều này cho phép các nhà phát triển dễ dàng tạo ra các ứng dụng web có quy mô lớn hơn bằng cách tận dụng những lợi thế do Vue cung cấp.