setContext() และ getContext()
จัดเตรียมและใช้งานค่าบริบทที่มีขอบเขตอยู่ภายในแผนผังคอมโพเนนต์ย่อย
setContext() และ getContext() เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คอนเท็กซ์คืออะไร
คอนเท็กซ์ช่วยให้คอมโพเนนต์แม่ส่งข้อมูลไปยังคอมโพเนนต์ลูกหลานทั้งหมดได้โดยไม่ต้องส่งพร็อพส์ผ่านแต่ละชั้น
นำเข้าฟังก์ชันช่วย
จาก svelte
import { setContext, getContext } from "svelte";ตั้งค่าในคอมโพเนนต์แม่
เรียกใช้ setContext(key, value) ในสคริปต์ของคอมโพเนนต์แม่
setContext("theme", { color: "dark" });เรียกใช้ในคอมโพเนนต์ลูกหลาน
เรียกใช้ getContext(key) ในคอมโพเนนต์ลูกหลานใดก็ได้เพื่ออ่านค่า
const theme = getContext("theme");คีย์
คีย์อาจเป็นข้อความหรือสัญลักษณ์ก็ได้ สัญลักษณ์ช่วยหลีกเลี่ยงการชนกัน
const themeKey = Symbol("theme");ภาพค่า
ค่าที่ส่งให้ setContext จะถูกเก็บไว้เพียงครั้งเดียว หากต้องการค่าที่มีการตอบสนอง ให้ใช้สโตร์
คอนเท็กซ์แบบรีแอกทีฟ
ส่งสโตร์เป็นคอนเท็กซ์เพื่อเปิดใช้การอัปเดตแบบรีแอกทีฟตลอดคอมโพเนนต์ลูกหลาน
setContext("user", userStore);จำกัดอยู่ในแผนผังย่อย
คอนเท็กซ์ใช้ได้เฉพาะกับคอมโพเนนต์ลูกหลานของคอมโพเนนต์ที่ตั้งค่าไว้เท่านั้น
คอนเท็กซ์หลายรายการ
แต่ละคอมโพเนนต์สามารถตั้งค่าคอนเท็กซ์ได้หลายรายการ และคอมโพเนนต์ลูกหลานสามารถอ่านค่าใดก็ได้ด้วยคีย์ที่ตรงกัน
กรณีการใช้งาน
theme, การรองรับหลายภาษา, การยืนยันตัวตน, การฉีดการพึ่งพา ทุกอย่างที่ไหลลงไปได้โดยไม่ต้องส่งพร็อพส์ทีละรายการ
เปรียบเทียบกับสโตร์
สโตร์ใช้ได้ทั่วทั้งแอป ส่วนคอนเท็กซ์จำกัดอยู่ในแผนผังคอมโพเนนต์ที่มีการเรียก setContext
ตรวจสอบความเข้าใจ
ใครสามารถอ่านคอนเท็กซ์ได้
ทบทวน
ใช้ setContext(key, val) และ getContext(key) เพื่อแชร์ข้อมูลผ่านแผนผังคอมโพเนนต์โดยไม่ใช้พร็อพส์
คำถามที่พบบ่อย
บทเรียน “setContext() และ getContext()” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “setContext() และ getContext()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “setContext() และ getContext()”
จัดเตรียมและใช้งานค่าบริบทที่มีขอบเขตอยู่ภายในแผนผังคอมโพเนนต์ย่อย คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “setContext() และ getContext()” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- setContext() และ getContext()
- Context กับ Store: ควรใช้แต่ละแบบเมื่อใด
- Context แบบมีชนิดด้วย TypeScript
- Context สำหรับการฉีดการพึ่งพา