ข้อมูลร่วมระหว่างโครงร่าง
โหลดข้อมูลในโครงร่างแม่และเข้าถึงข้อมูลนั้นในหน้าหรือโครงร่างลูก
ข้อมูลร่วมระหว่างโครงร่าง เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
การโหลดของเลย์เอาต์
+layout.js หรือ +layout.server.js สามารถโหลดข้อมูลที่ทุกหน้าใต้เลย์เอาต์นั้นใช้ร่วมกันได้
การเข้าถึงข้อมูล
หน้าจะได้รับข้อมูลที่รวมจากเลย์เอาต์บรรพบุรุษทั้งหมดและจากตัวหน้าเอง
export let data;
// data has both layout and page propertiesการสืบทอดในคอมโพเนนต์
ใช้ $page.data เพื่อเข้าถึงข้อมูลที่รวมแล้วจากที่ใดก็ได้ในต้นไม้เลย์เอาต์
import { page } from "$app/stores";
<p>User: {$page.data.user?.name}</p>การตรวจสอบสิทธิ์ระดับบนสุด
โหลดผู้ใช้ปัจจุบันในเลย์เอาต์ราก แล้วทุกหน้าจะเข้าถึงผู้ใช้นั้นผ่าน $page.data ได้
หลีกเลี่ยงการทำซ้ำ
การโหลดข้อมูลที่เลย์เอาต์ระดับสูงสุดซึ่งจำเป็นต้องใช้ จะช่วยป้องกันการดึงข้อมูลซ้ำในแต่ละหน้า
ข้อมูลเฉพาะเซิร์ฟเวอร์
สำหรับข้อมูลที่ละเอียดอ่อน ให้โหลดใน +layout.server.js เพื่อไม่ให้ข้อมูลไปถึงไคลเอ็นต์ เว้นแต่จะถูกนำไปแสดงผล
การส่งข้อมูลแบบต่อเนื่อง
การโหลดของเลย์เอาต์สามารถส่งผ่าน Promise แบบต่อเนื่องได้เช่นเดียวกับการโหลดของหน้า
การแก้ไขข้อขัดแย้ง
ข้อมูลของหน้าจะเขียนทับข้อมูลของเลย์เอาต์เมื่อใช้คีย์เดียวกัน
การสืบทอดใน TypeScript
ชนิดข้อมูลของหน้าจะรวมชนิดข้อมูลจากเลย์เอาต์บรรพบุรุษโดยอัตโนมัติผ่านชนิดข้อมูลที่สร้างขึ้น
การทำให้ข้อมูลไม่ถูกต้อง
ใช้ invalidate เพื่อเรียกใช้การโหลดของเลย์เอาต์บางรายการใหม่ตามต้องการ
import { invalidate } from "$app/navigation";
invalidate("app:user");ลำดับชั้น
ให้มองเลย์เอาต์เป็นลำดับชั้นของข้อมูล: รากสำหรับข้อมูลทั่วโลก ส่วนต่าง ๆ สำหรับข้อมูลเฉพาะส่วน และหน้าสำหรับข้อมูลเฉพาะหน้า
ตรวจสอบอย่างรวดเร็ว
คุณจะเข้าถึงข้อมูลของเลย์เอาต์ในหน้าได้อย่างไร
สรุปทบทวน
การโหลดของเลย์เอาต์จะช่วยสร้างออบเจ็กต์ข้อมูลที่รวมแล้ว ซึ่งรายการย่อยสามารถเข้าถึงได้ผ่านพร็อพเพอร์ตี data และ $page.data
คำถามที่พบบ่อย
บทเรียน “ข้อมูลร่วมระหว่างโครงร่าง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ข้อมูลร่วมระหว่างโครงร่าง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ข้อมูลร่วมระหว่างโครงร่าง”
โหลดข้อมูลในโครงร่างแม่และเข้าถึงข้อมูลนั้นในหน้าหรือโครงร่างลูก คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ข้อมูลร่วมระหว่างโครงร่าง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- กลุ่มโครงร่างด้วย (group)
- โครงร่างระดับเส้นทาง
- การแยกออกจากโครงร่างด้วย +page@route
- ข้อมูลร่วมระหว่างโครงร่าง