0Pricing
Vue Academy · บทเรียน

useCounter: คอมโพสิเบิลแบบง่าย

รีเฟอเรนซ์ count ฟังก์ชันเพิ่ม/ลดค่า การรีเซ็ต และการเปิดเผยเฉพาะสิ่งที่จำเป็น

useCounter: คอมโพสิเบิลแบบง่าย เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

สร้าง useCounter

เราจะเขียนคอมโพสิเบิลขนาดเล็กแต่สมบูรณ์ชื่อ useCounter คอมโพสิเบิลนี้จัดการตัวเลขและเปิดเผยเมธอดสำหรับเปลี่ยนค่า จึงเหมาะอย่างยิ่งสำหรับคอมโพสิเบิลตัวแรก

รับค่าเริ่มต้น

กำหนดพารามิเตอร์ initial ให้ฟังก์ชัน พร้อมค่าเริ่มต้น เพื่อให้ผู้เรียกใช้กำหนดจุดเริ่มต้นของตัวนับได้ตามต้องการ

function useCounter(initial = 0) {
  // ...
}

รีฟจำนวนภายใน

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

import { ref } from "vue";
function useCounter(initial = 0) {
  const count = ref(initial);
}

ฟังก์ชัน increment

กำหนดฟังก์ชันที่เปลี่ยนค่ารีฟ เนื่องจาก count เป็นรีแอคทีฟ ผู้เรียกใช้ทุกแห่งจึงอัปเดตโดยอัตโนมัติ

function increment() {
  count.value++;
}

decrement และ reset

เพิ่มการทำงานที่เป็นคู่กัน โดย reset จะใช้ค่า initial เดิมที่ฟังก์ชันชั้นนอกเก็บไว้

function decrement() {
  count.value--;
}
function reset() {
  count.value = initial;
}

คืนค่าส่วนติดต่อ

คืนค่าออบเจ็กต์ที่มีสถานะรีแอคทีฟและเมธอดทั้งหมด นี่คือส่วนติดต่อสาธารณะของคอมโพสิเบิล

return { count, increment, decrement, reset };

คอมโพสิเบิลฉบับสมบูรณ์

เมื่อนำทุกส่วนมารวมกัน โค้ดทั้งหมดจะกระชับและนำกลับมาใช้ใหม่ได้ในทุกคอมโพเนนต์

import { ref } from "vue";
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initial;
  return { count, increment, decrement, reset };
}

ใช้งานในคอมโพเนนต์

เรียกใช้ภายใน <script setup> แล้วแยกโครงสร้างค่า แม่แบบสามารถใช้ count ได้โดยตรง (ระบบแกะรีฟให้อัตโนมัติ) และผูกกับเมธอดต่าง ๆ ได้

const { count, increment, decrement, reset } = useCounter(10);

ในแม่แบบ

ผูกเมธอดเข้ากับปุ่ม การคลิกแต่ละครั้งจะเปลี่ยนค่ารีฟที่ใช้ร่วมกัน และมุมมองจะอัปเดต

<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>

อินสแตนซ์ที่เป็นอิสระต่อกัน

การเรียก useCounter แต่ละครั้งจะสร้างรีฟ count ของตัวเอง คอมโพเนนต์สองตัวที่เรียกใช้จะได้ตัวนับแยกจากกันและไม่กระทบกัน

const a = useCounter();   // own count
const b = useCounter(100); // own count

เพิ่มค่าที่คำนวณได้

คุณสามารถเพิ่มสถานะที่คำนวณจากค่าอื่นลงในคอมโพสิเบิลได้ เช่น ค่า isZero ที่คำนวณแล้วส่งคืนไปพร้อมกับค่าอื่น ๆ

import { computed } from "vue";
const isZero = computed(() => count.value === 0);
// add to return: { count, isZero, increment, ... }

ตรวจสอบความเข้าใจ

เหตุใดการเรียก useCounter แต่ละครั้งจึงได้สถานะของตัวเอง

สรุป

คุณได้สร้าง useCounter(initial) ซึ่งประกอบด้วยรีฟ count ภายใน ฟังก์ชัน increment/decrement/reset และออบเจ็กต์ที่ส่งคืนเพื่อเปิดเผยสถานะรีแอคทีฟพร้อมเมธอด การเรียกใช้แต่ละครั้งจะได้อินสแตนซ์ที่เป็นอิสระต่อกัน

คำถามที่พบบ่อย

บทเรียน “useCounter: คอมโพสิเบิลแบบง่าย” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “useCounter: คอมโพสิเบิลแบบง่าย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “useCounter: คอมโพสิเบิลแบบง่าย”

รีเฟอเรนซ์ count ฟังก์ชันเพิ่ม/ลดค่า การรีเซ็ต และการเปิดเผยเฉพาะสิ่งที่จำเป็น คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “useCounter: คอมโพสิเบิลแบบง่าย” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. สิ่งที่ทำให้ Composable มีคุณภาพ
  2. useCounter: คอมโพสิเบิลแบบง่าย
  3. useFetch: คอมโพสิเบิลสำหรับข้อมูลแบบอะซิงโครนัส
  4. VueUse: ไลบรารีคอมโพสิเบิล
← กลับไปที่ Vue Academy