Store แบบ readable และฟังก์ชันเริ่มต้นกำหนดเอง
สร้าง store แบบอ่านได้อย่างเดียวที่ทำงานร่วมกับตัวจับเวลา เซนเซอร์ หรือแหล่งข้อมูลภายนอก
Store แบบ readable และฟังก์ชันเริ่มต้นกำหนดเอง เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
สโตร์แบบอ่านอย่างเดียว
สโตร์ readable มีเพียง subscribe ผู้ใช้สโตร์ไม่สามารถเปลี่ยนแปลงค่าได้
นำเข้าสโตร์แบบอ่านได้
มาจาก svelte/store
import { readable } from "svelte/store";ค่าเริ่มต้นและฟังก์ชันเริ่มต้น
ส่งค่าเริ่มต้นและฟังก์ชันเริ่มต้น ฟังก์ชันเริ่มต้นจะได้รับค่า set และทำงานหนึ่งครั้งเมื่อมีผู้สมัครรับข้อมูลรายแรก
export const time = readable(new Date(), (set) => {
const id = setInterval(() => set(new Date()), 1000);
return () => clearInterval(id);
});ฟังก์ชันหยุด
คืนฟังก์ชันล้างทรัพยากรจากฟังก์ชันเริ่มต้น Svelte จะเรียกใช้ฟังก์ชันนี้เมื่อผู้สมัครรับข้อมูลรายสุดท้ายยกเลิกการสมัคร
การตั้งค่าเมื่อจำเป็น
ฟังก์ชันเริ่มต้นจะไม่ทำงานจนกว่าจะมีผู้สมัครรับข้อมูล ช่วยประหยัดทรัพยากรเมื่อไม่มีการใช้งาน
กรณีใช้งาน
นาฬิกา ค่าที่อ่านจากเซนเซอร์ ฟีดจากเว็บซ็อกเก็ต ตำแหน่งที่ตั้ง หรือสิ่งใดก็ตามที่ขับเคลื่อนด้วยตัวจับเวลาหรือเหตุการณ์ภายนอก
ใช้ร่วมกับคอมโพเนนต์
สมัครรับข้อมูลด้วย $time ในคอมโพเนนต์ใดก็ได้ Svelte จะจัดการการล้างทรัพยากรให้
<p>The time is {$time.toLocaleTimeString()}</p>ค่าเริ่มต้นโดยไม่มีการอัปเดต
ไม่ต้องใส่ฟังก์ชันเริ่มต้น หากต้องการสโตร์แบบอ่านได้ที่มีค่าคงที่ เหมาะสำหรับการตั้งค่าแบบคงที่
export const apiBase = readable("https://api.example.com");การนำรูปแบบกลับมาใช้ใหม่
รูปแบบตัวสร้างช่วยให้คุณสร้างสโตร์แบบอ่านได้เฉพาะโดเมนได้อย่างง่ายดาย
เปรียบเทียบกับสโตร์แบบเขียนได้
สโตร์แบบอ่านได้ป้องกันการเขียนโดยไม่ตั้งใจจากผู้ใช้สโตร์ เหมาะสำหรับแหล่งข้อมูลที่โมดูลเดียวเป็นเจ้าของ
แปลงสโตร์แบบเขียนได้เป็นแบบอ่านได้
เปิดเผยเฉพาะเมธอดสมัครรับข้อมูลของสโตร์แบบเขียนได้ เพื่อมอบมุมมองแบบอ่านได้ให้ผู้ใช้สโตร์
export const time = { subscribe: timeStore.subscribe };ตรวจสอบอย่างรวดเร็ว
ฟังก์ชันเริ่มต้นทำงานเมื่อใด
สรุป
readable สร้างสโตร์แบบอ่านอย่างเดียวที่เริ่มทำงานเมื่อจำเป็นและมีฟังก์ชันล้างทรัพยากร เหมาะอย่างยิ่งสำหรับแหล่งข้อมูลภายนอก
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “Store แบบ readable และฟังก์ชันเริ่มต้นกำหนดเอง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Store แบบ readable และฟังก์ชันเริ่มต้นกำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Store แบบ readable และฟังก์ชันเริ่มต้นกำหนดเอง”
สร้าง store แบบอ่านได้อย่างเดียวที่ทำงานร่วมกับตัวจับเวลา เซนเซอร์ หรือแหล่งข้อมูลภายนอก คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “Store แบบ readable และฟังก์ชันเริ่มต้นกำหนดเอง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การสร้าง Store ที่เขียนได้
- การสมัครด้วย $ แบบสมัครอัตโนมัติ
- การอัปเดต Store: set() และ update()
- Store แบบ readable และฟังก์ชันเริ่มต้นกำหนดเอง