วิธีใช้ลอจิกซ้ำใน Vue.js ด้วย Composables

เมื่อเขียนโปรแกรม สิ่งสำคัญคือต้องจัดโครงสร้างโค้ดเบสของคุณเพื่อให้คุณใช้โค้ดซ้ำได้หากเป็นไปได้ การทำซ้ำโค้ดอาจทำให้โค้ดเบสขยายและทำให้การแก้ไขจุดบกพร่องซับซ้อนขึ้น โดยเฉพาะในแอปขนาดใหญ่

Vue อำนวยความสะดวกในการนำโค้ดกลับมาใช้ใหม่โดยใช้องค์ประกอบที่เขียนได้ องค์ประกอบเหล่านี้เป็นฟังก์ชันหลักที่ครอบคลุมชุดตรรกะเฉพาะ ซึ่งช่วยให้สามารถบูรณาการอย่างราบรื่นในส่วนประกอบต่างๆ ภายในโครงการเดียว เพื่อให้สามารถจัดการกับฟังก์ชันการทำงานที่เทียบเคียงได้

มันเป็นองค์ประกอบที่สามารถประกอบได้เสมอหรือเปล่า?

ก่อนที่จะมีการเปิดตัว composable ใน Vue 3 นักพัฒนาใช้มิกซ์อินเพื่อแยกโค้ดที่นำมาใช้ซ้ำได้และนำไปใช้ทั่วทั้งแอปพลิเคชันของพวกเขา มิกซ์อินเหล่านี้ประกอบด้วยการกำหนดค่า Vue.js มากมาย รวมถึงคุณสมบัติของข้อมูล วิธีการ และวงจรการใช้งานของส่วนประกอบ ซึ่งอำนวยความสะดวกในการแบ่งปันโค้ดอย่างกว้างขวางระหว่างองค์ประกอบต่างๆ

หากต้องการนำมิกซ์อินไปใช้ โดยทั่วไปแล้วเราจะจัดระเบียบมิกซ์อินเหล่านั้นเป็นไฟล์แต่ละไฟล์และรวมไว้ในคอมโพเนนต์โดยรวมไว้เป็นส่วนหนึ่งของคุณสมบัติ"มิกซ์อิน"ของคอมโพเนนต์ภายในการตั้งค่าตัวเลือกที่เกี่ยวข้อง เพื่อเป็นตัวอย่าง ให้พิจารณาข้อมูลโค้ดต่อไปนี้:

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

ส่วนรหัสนี้แสดงองค์ประกอบของมิกซ์อินที่ใช้สำหรับการตรวจสอบแบบฟอร์ม mixin ดังกล่าวประกอบด้วยแอตทริบิวต์ข้อมูลสองรายการ-formData และ formErrors-ซึ่งเริ่มแรกจะกำหนดค่าว่างหรือค่าโมฆะ

กลไกการจัดเก็บข้อมูลที่เรียกว่า formData มีหน้าที่รับผิดชอบในการเก็บรักษาข้อมูลที่ส่งผ่านแบบฟอร์มบนเว็บ ซึ่งรวมถึงช่องว่างที่กำหนดสำหรับชื่อผู้ใช้และรหัสผ่าน ในทำนองเดียวกัน ตัวแปร formErrors ได้ถูกสร้างขึ้นด้วยโครงสร้างที่เหมือนกันเพื่อรองรับข้อความแสดงข้อผิดพลาดที่อาจเกิดขึ้นได้ โดยทั้งสองค่าจะถูกเตรียมใช้งานให้เป็นโมฆะของเนื้อหาตั้งแต่แรก

Mixin รวมวิธีการที่เรียกว่า validateForm() ซึ่งทำหน้าที่ตรวจสอบว่าช่องป้อนข้อมูลชื่อผู้ใช้และรหัสผ่านถูกกรอกหรือไม่ ในกรณีที่ช่องใดช่องหนึ่งว่าง ฟังก์ชันจะเติมแอตทริบิวต์ formErrors พร้อมการแจ้งเตือนข้อผิดพลาดที่เหมาะสม

การใช้งานทำให้แน่ใจได้ว่าวิธีการนี้ให้ค่าบูลีนเป็นจริงเมื่อไม่มีข้อผิดพลาดในโครงสร้างข้อมูล formErrors หากต้องการใช้ฟังก์ชันนี้ภายในส่วนประกอบ Vue.js เราอาจนำเข้าโมดูลที่เกี่ยวข้องซึ่งมีฟังก์ชัน reactiveMixin และรวมไว้เป็นส่วนหนึ่งของคุณสมบัติมิกซ์อินของออบเจ็กต์ Options การบูรณาการนี้ช่วยให้ส่วนประกอบสามารถใช้ประโยชน์จากฟังก์ชัน reactiveMixin ซึ่งรวมถึงการตรวจจับข้อผิดพลาดอัตโนมัติและการซิงโครไนซ์กับส่วนประกอบหลักเมื่อค่าอินพุตเปลี่ยนแปลง

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

ในกรณีนี้ เราสังเกตองค์ประกอบ Vue ที่ใช้กลยุทธ์ออบเจ็กต์ Options การผสมผสานคุณสมบัติครอบคลุมทุกมิกซ์อินที่ได้รับการนำเข้าเพื่อใช้ภายในโครงสร้างที่กำหนด โดยเฉพาะอย่างยิ่ง ส่วนประกอบจะใช้ฟังก์ชัน validateForm ที่ได้มาจาก formValidation mixin เพื่อแจ้งให้ผู้ใช้ปลายทางทราบถึงผลลัพธ์ของการส่งแบบฟอร์ม กล่าวคือไม่ว่าจะดำเนินการสำเร็จหรือไม่ก็ตาม

วิธีใช้คอมโพสิต

composable คือโมดูล JavaScript แบบสแตนด์อโลนที่ครอบคลุมฟังก์ชันการทำงานที่ปรับแต่งตามความต้องการหรือวัตถุประสงค์เฉพาะ ช่วยให้ควบคุมความสามารถของ Composition API ของ Vue ภายในขอบเขตโดยการใช้ทรัพยากร เช่น ตัวแปรเชิงโต้ตอบและค่าที่คำนวณ

การใช้จุดเชื่อมต่อนี้ให้สิทธิ์ในการพัฒนาฟังก์ชันที่เชื่อมต่อกับองค์ประกอบมากมายได้อย่างราบรื่น ฟังก์ชันดังกล่าวจะสร้างเอนทิตี ซึ่งสามารถนำเข้าและหลอมรวมภายในส่วนประกอบ Vue ได้อย่างง่ายดายผ่านขั้นตอนการกำหนดค่าที่ Composition API มอบให้

ในการใช้องค์ประกอบที่เขียนได้ในโปรเจ็กต์ของคุณ จำเป็นต้องสร้างไฟล์ JavaScript ใหม่ภายในไดเร็กทอรี “src” ของโปรเจ็กต์ของคุณ ในกรณีที่โปรเจ็กต์ต้องการการจัดระเบียบในระดับที่ละเอียดยิ่งขึ้น เราอาจเลือกที่จะสร้างโฟลเดอร์ย่อยภายในไดเร็กทอรี"src"และกำหนดไฟล์ JavaScript แต่ละไฟล์สำหรับองค์ประกอบที่เขียนได้ต่างๆ จำเป็นอย่างยิ่งที่ชื่อไฟล์ที่กำหนดของแต่ละองค์ประกอบจะต้องแสดงถึงฟังก์ชันหรือวัตถุประสงค์ที่ตั้งใจไว้อย่างถูกต้อง

ในการสร้างส่วนประกอบแบบโมดูลาร์ที่นำมาใช้ซ้ำได้สำหรับการตรวจสอบความถูกต้องของแบบฟอร์มใน JavaScript จำเป็นต้องกำหนดฟังก์ชันภายในไฟล์สคริปต์ที่สรุปตรรกะและฟังก์ชันการทำงานที่เกี่ยวข้องทั้งหมดก่อน ด้วยการปรับโครงสร้างมิกซ์ FormValidation ในลักษณะนี้ เราจะสามารถบรรลุความยืดหยุ่นและความสะดวกในการใช้งานมากขึ้น เมื่อนำการตรวจสอบความถูกต้องของแบบฟอร์มไปใช้ในหลายโครงการหรือแอปพลิเคชัน

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

ข้อมูลโค้ดที่กำหนดจะนำเข้าฟังก์ชันแบบโต้ตอบจากแพ็คเกจ Vue และต่อมาพัฒนาผู้ส่งออกชื่อ useFormValidation() ซึ่งทำหน้าที่จัดการการตรวจสอบความถูกต้องของแบบฟอร์มภายในแอปพลิเคชัน

รหัสจะดำเนินการโดยการกำหนดตัวแปรปฏิกิริยาชื่อ state ซึ่งเก็บคุณสมบัติ formData และ formErrors ภายในขอบเขตของมัน ซึ่งช่วยให้เข้าถึงค่าเหล่านี้ได้อย่างสะดวกในระหว่างการส่งและการเตรียมใช้งานแบบฟอร์ม ต่อจากนั้น ตัวอย่างข้อมูลจะใช้วิธีการที่คล้ายกันอย่างมากกับวิธีการที่แสดงโดยมิกซ์อินที่กล่าวถึงก่อนหน้านี้ เพื่อจัดการกระบวนการตรวจสอบความถูกต้องของแบบฟอร์ม ท้ายที่สุดแล้ว ผลลัพธ์คือการจัดเตรียมตัวแปร state และฟังก์ชัน validateForm ให้เป็นเอนทิตีที่รวมกัน

การรวมฟังก์ชัน JavaScript จากไฟล์ที่ระบุลงในส่วนประกอบของคุณสามารถทำได้ผ่านกระบวนการนำเข้าภายในไฟล์ที่เกี่ยวข้อง

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

หลังจากการแนะนำส่วนประกอบการทำงาน useFormValidation การใช้งานในปัจจุบันจะดำเนินการเพื่อแยกโครงสร้างอ็อบเจ็กต์ JavaScript ที่นำเข้าควบคู่ไปกับส่วนประกอบดังกล่าว กระบวนการนี้ช่วยให้สามารถดำเนินการขั้นตอนการตรวจสอบความถูกต้องของแบบฟอร์มภายในแอปพลิเคชันต่อไปได้ ต่อมาโปรแกรมจะเพิ่มการแจ้งเตือนโดยมีรายละเอียดผลลัพธ์ของการส่งที่สำเร็จหรือข้อผิดพลาดทั่วไปใดๆ ที่ตรวจพบในระหว่างขั้นตอนการประเมิน

Composables คือมิกซ์อินใหม่

Vue Composables นำเสนอการปรับปรุงที่เหนือกว่า Mixins เนื่องจากนำเสนอวิธีการรีไซเคิลที่เป็นระเบียบและยั่งยืนมากขึ้นภายในโปรเจ็กต์ Vue.js ช่วยให้นักพัฒนาสามารถสร้างเว็บแอปพลิเคชันขนาดใหญ่ขึ้นได้อย่างง่ายดายโดยใช้ประโยชน์จากข้อดีที่ Vue มอบให้