Vue Academy · บทเรียน

โรงงานคอมโพสิเบิลและคอมโพสิเบิลแบบรับพารามิเตอร์

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

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

คอมโพสิเบิลที่รับพารามิเตอร์

คอมโพสิเบิลทั่วไปจะคืนการทำงานแบบตายตัว ส่วนคอมโพสิเบิลที่รับพารามิเตอร์จะรับอาร์กิวเมนต์เพื่อปรับแต่งสิ่งที่ทำ เช่น URL พื้นฐาน ตัวเลือก และค่าเริ่มต้น ทำให้ฟังก์ชันเดียวรองรับกรณีต่าง ๆ ได้มากมาย

คอมโพสิเบิลที่รับพารามิเตอร์แบบง่าย

ส่งการกำหนดค่าเป็นอาร์กิวเมนต์ ในที่นี้ผู้เรียกจะเป็นผู้ระบุ URL ดังนั้น useFetch เดียวจึงใช้ได้กับปลายทางใดก็ได้

import { ref } from "vue"

export function useFetch(url) {
  const data = ref(null)
  fetch(url).then(r => r.json()).then(d => data.value = d)
  return { data }
}

การรับออบเจ็กต์ตัวเลือก

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

export function useFetch(url, options = {}) {
  const { immediate = true, method = "GET" } = options
  const data = ref(null)
  function run() { /* fetch with method */ }
  if (immediate) run()
  return { data, run }
}

ฟังก์ชันโรงงานของคอมโพสิเบิลคืออะไร

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

การสร้างฟังก์ชันโรงงาน

ฟังก์ชันภายนอกจะเก็บการกำหนดค่าร่วมไว้ (เช่น baseURL) ส่วนฟังก์ชันภายในที่คืนกลับมาคือคอมโพสิเบิล โดยมีการกำหนดค่าดังกล่าวติดมาด้วยผ่านคลอเชอร์

export function createApi(baseURL) {
  return function useApi(path) {
    const data = ref(null)
    fetch(baseURL + path).then(r => r.json()).then(d => data.value = d)
    return { data }
  }
}

การใช้ฟังก์ชันโรงงาน

เรียกใช้ฟังก์ชันโรงงานหนึ่งครั้ง (มักทำในโมดูลที่ใช้ร่วมกัน) เพื่อสร้างคอมโพสิเบิลที่กำหนดค่าแล้ว จากนั้นนำเข้าและใช้คอมโพสิเบิลนั้นได้ทุกที่

// api.js
export const useApi = createApi("https://api.example.com")

// component
import { useApi } from "./api"
const { data } = useApi("/users")

สถานะแยกกันในแต่ละอินสแตนซ์

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

const a = useFetch("/posts")   // its own data ref
const b = useFetch("/comments") // a separate data ref

ซิงเกิลตันที่ใช้ร่วมกันระดับโมดูล

บางครั้งคุณต้องการอินสแตนซ์ที่ใช้ร่วมกันเพียงหนึ่งเดียว ให้ประกาศสถานะในระดับโมดูล (อยู่นอกฟังก์ชัน) แล้วให้คอมโพสิเบิลปิดล้อมสถานะนั้นไว้ ผู้เรียกทุกตัวจึงใช้รีฟชุดเดียวกัน

import { ref } from "vue"
const user = ref(null) // module-level, shared

export function useAuth() {
  function login(u) { user.value = u }
  return { user, login }
}

อินสแตนซ์แยกกันกับซิงเกิลตัน

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

เลือกใช้ตามข้อมูลนั้นว่าเป็นข้อมูลเฉพาะของคอมโพเนนต์หรือเป็นข้อมูลส่วนกลาง

การใช้ฟังก์ชันโรงงานร่วมกับซิงเกิลตัน

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

export function createStore(initial) {
  const state = ref(initial) // created once per factory call
  return function useStore() {
    return { state }
  }
}
export const useCounter = createStore(0)

เมื่อใดควรใช้ฟังก์ชันโรงงาน

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

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ตรวจสอบความเข้าใจของคุณเกี่ยวกับฟังก์ชันโรงงานของคอมโพสิเบิลและขอบเขต

สรุปทบทวน

คุณได้เรียนรู้ฟังก์ชันโรงงานของคอมโพสิเบิลและขอบเขตดังนี้:

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

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

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

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

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

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

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

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

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

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

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

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

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

รีแอกทีฟขั้นสูง: shallowRef และ triggerRef
โรงงานคอมโพสิเบิลและคอมโพสิเบิลแบบรับพารามิเตอร์
เครื่องสถานะด้วย XState ใน Vue
effectScope สำหรับเอฟเฟกต์แบบกลุ่ม

← กลับไปที่ Vue Academy