inject() ในคอมโพเนนต์ลูก
การใช้ inject() พร้อมค่าเริ่มต้น การฉีดค่าที่จำเป็น และคีย์ Symbol สำหรับแยกเนมสเปซ
inject() ในคอมโพเนนต์ลูก เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
ฟังก์ชันฉีดค่า
inject ดึงค่าที่คอมโพเนนต์บรรพบุรุษให้ไว้ โดยค้นหาด้วยคีย์เดียวกัน เรียกใช้ใน <script setup>
import { inject } from "vue";
const theme = inject("theme");การตอบสนองยังคงอยู่
หากคอมโพเนนต์บรรพบุรุษให้ค่าเป็น ref ค่าที่ฉีดเข้ามาจะเป็นค่าอ้างอิงเดียวกัน การอ่าน theme.value ยังคงตอบสนองและอัปเดตเมื่อผู้ให้ค่าเปลี่ยนค่า
const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)การให้ค่าเริ่มต้น
หากไม่มีคอมโพเนนต์บรรพบุรุษให้คีย์นั้น inject จะส่งคืน undefined ให้ส่งอาร์กิวเมนต์ที่สองเป็นค่าเริ่มต้น เพื่อให้คอมโพเนนต์ยังทำงานได้อย่างเหมาะสม
const theme = inject("theme", "light");
// "light" used when nothing was providedค่าเริ่มต้นจากฟังก์ชันสร้างค่า
สำหรับค่าเริ่มต้นที่เป็นออบเจ็กต์หรือสร้างได้มีค่าใช้จ่ายสูง ให้ส่งฟังก์ชันสร้างค่าและกำหนดอาร์กิวเมนต์ที่สามเป็น true เพื่อให้สร้างค่าเริ่มต้นเมื่อจำเป็นเท่านั้น
const config = inject("config", () => ({ retries: 3 }), true);การฉีดการกระทำ
หากผู้ให้ค่ามีฟังก์ชันให้มาด้วย ให้ฉีดค่าด้วยวิธีเดียวกันแล้วเรียกใช้เพื่อร้องขอการเปลี่ยนแปลง โดยผู้ให้ค่าเป็นผู้รับผิดชอบการแก้ไขสถานะ
const updateName = inject("updateName");
updateName("Grace");การฉีดออบเจ็กต์ที่เก็บสถานะ
เมื่อผู้ให้ค่ารวมสถานะและการกระทำไว้ด้วยกัน ให้ฉีดออบเจ็กต์ทั้งหมดแล้วแยกองค์ประกอบเฉพาะส่วนที่ต้องการใช้
const { user, updateName } = inject("userStore");การฉีดค่าที่ปลอดภัยด้านชนิดข้อมูลใน TypeScript
Vue ส่งออก InjectionKey<T> เพื่อให้การฉีดค่าปลอดภัยด้านชนิดข้อมูล คีย์ที่ระบุชนิดข้อมูลจะบอก TypeScript ได้อย่างชัดเจนว่าค่าที่ฉีดเข้ามามีรูปแบบใด
import type { InjectionKey, Ref } from "vue";
export const themeKey: InjectionKey<Ref<string>> = Symbol("theme");การใช้คีย์ที่ระบุชนิดข้อมูล
ให้ค่าและฉีดค่าด้วยคีย์ที่ระบุชนิดข้อมูล ตอนนี้ TypeScript จะอนุมานชนิดของค่าและแจ้งข้อผิดพลาดเมื่อชนิดไม่ตรงกัน
provide(themeKey, theme); // theme: Ref<string>
const theme = inject(themeKey); // inferred Ref<string> | undefinedคีย์สัญลักษณ์เพื่อความไม่ซ้ำกัน
การใช้ Symbol เป็นคีย์ ซึ่งมักใช้ร่วมกับ InjectionKey จะรับประกันว่าจะไม่มีการชนกันของสตริงระหว่างผู้ให้ค่าที่ไม่เกี่ยวข้องกันในโค้ดเบสขนาดใหญ่
export const authKey = Symbol("auth") as InjectionKey<AuthService>;การจัดการเมื่อไม่มีผู้ให้ค่า
ในการตั้งค่าที่เข้มงวด คุณอาจต้องการให้เกิดข้อผิดพลาดเมื่อไม่มีการฉีดค่าที่จำเป็น เพื่อแสดงปัญหาการเชื่อมต่อให้เห็นตั้งแต่เนิ่น ๆ แทนที่จะใช้ค่า undefined อย่างเงียบ ๆ
const auth = inject(authKey);
if (!auth) throw new Error("auth provider missing");ฉีดค่าได้ทุกที่ในส่วนย่อย
คอมโพเนนต์สามารถฉีดค่าได้ไม่ว่าจะอยู่ลึกเพียงใด ตราบใดที่มีคอมโพเนนต์บรรพบุรุษให้คีย์นั้น คอมโพเนนต์ระหว่างทางไม่ต้องเปลี่ยนแปลง นี่คือจุดประสงค์หลักของ provide/inject
ตรวจสอบความเข้าใจ
inject("theme", "light") ส่งคืนอะไรเมื่อไม่มีผู้ให้ค่า
ทบทวน
คุณได้เรียนรู้ว่า inject(key) อ่านค่าที่ให้ไว้ และยังคงการตอบสนองสำหรับค่าอ้างอิง ส่งค่าเริ่มต้นหรือฟังก์ชันสร้างค่าเพื่อรองรับกรณีไม่มีค่าอย่างเหมาะสม และใช้ InjectionKey<T> ร่วมกับคีย์ Symbol เพื่อการฉีดค่าที่ปลอดภัยด้านชนิดข้อมูลและไม่เกิดการชนกัน
คำถามที่พบบ่อย
บทเรียน “inject() ในคอมโพเนนต์ลูก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “inject() ในคอมโพเนนต์ลูก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “inject() ในคอมโพเนนต์ลูก”
การใช้ inject() พร้อมค่าเริ่มต้น การฉีดค่าที่จำเป็น และคีย์ Symbol สำหรับแยกเนมสเปซ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “inject() ในคอมโพเนนต์ลูก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ปัญหาการส่งพร็อพส์ต่อทอดยาว
- provide() ในคอมโพเนนต์แม่
- inject() ในคอมโพเนนต์ลูก
- Provide/Inject สำหรับสถานะระดับแอป