Provide/Inject สำหรับสถานะระดับแอป
app.provide() สำหรับสถานะส่วนกลาง การกำหนดธีม i18n และการหลีกเลี่ยง Pinia ในกรณีง่าย ๆ
Provide/Inject สำหรับสถานะระดับแอป เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การให้ค่าในระดับแอป
นอกจาก provide ระดับคอมโพเนนต์แล้ว คุณยังสามารถให้ค่าบนออบเจ็กต์แอปด้วย app.provide ได้ ค่านี้จะพร้อมใช้งานในคอมโพเนนต์ทุกตัวของแอป
const app = createApp(App);
app.provide("appVersion", "1.0.0");การให้บริการส่วนกลาง
การให้ค่าในระดับแอปเหมาะอย่างยิ่งสำหรับสิ่งที่ใช้ร่วมกันเพียงชุดเดียว เช่น บริการ auth ไคลเอนต์ HTTP หรือเครื่องบันทึกเหตุการณ์ ซึ่งเป็นสิ่งที่ทั้งแอปอาจต้องใช้
import { authService } from "./auth";
app.provide("auth", authService);การใช้บริการส่วนกลาง
คอมโพเนนต์ใด ๆ ก็สามารถฉีดบริการด้วยคีย์ได้จากทุกที่ในแผนผัง โดยไม่ต้องส่งพร็อพต่อหลายชั้นหรือเชื่อมต่อเพิ่มเติม
const auth = inject("auth");
auth.login(credentials);คีย์สัญลักษณ์สำหรับค่าระดับแอป
สำหรับบริการที่ใช้ทั่วทั้งแอป คีย์สัญลักษณ์ที่ส่งออกมาและควรระบุชนิดข้อมูลด้วย จะช่วยให้การฉีดค่าปลอดภัยและค้นหาได้ง่ายทั่วทั้งโค้ดเบส
// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);ลำดับการค้นหา
เมื่อการให้ค่าในระดับแอปและระดับคอมโพเนนต์ใช้คีย์เดียวกัน ผู้ให้ค่าที่อยู่ใกล้ที่สุดจะมีลำดับความสำคัญสำหรับคอมโพเนนต์ลูกหลานของคอมโพเนนต์นั้น ส่วนระดับแอปทำหน้าที่เป็นค่าเริ่มต้นสำรองส่วนกลาง
กรณีที่เน้นการอ่าน
provide/inject เหมาะอย่างยิ่งเมื่อคอมโพเนนต์จำนวนมากเพียง อ่านข้อมูลที่ใช้ร่วมกัน เช่น theme ภาษาท้องถิ่น และ config ผู้ใช้ค่าไม่จำเป็นต้องเขียนข้อมูล รูปแบบนี้จึงยังเรียบง่ายและคาดเดาได้
เปรียบเทียบกับ Pinia
Pinia คือไลบรารีจัดการสถานะอย่างเป็นทางการของ Vue โดยมีเครื่องมือสำหรับนักพัฒนา ที่เก็บสถานะแบบแยกโมดูล การกระทำ ตัวอ่านค่า และการดีบักย้อนเวลา จึงเหมาะสำหรับสถานะส่วนกลางที่ซับซ้อนและถูกแก้ไขบ่อย
import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });เมื่อ provide/inject เพียงพอ
สำหรับค่าที่ใช้ร่วมกันและส่วนใหญ่มีไว้สำหรับอ่าน provide/inject ช่วยหลีกเลี่ยงภาระของที่เก็บสถานะ เป็นความสามารถในตัวที่เบากว่าและชัดเจนสำหรับ theme การรองรับหลายภาษา หรือบริการที่ฉีดเข้ามา
เมื่อควรเลือก Pinia
เลือก Pinia เมื่อสถานะถูกแก้ไขจากหลายที่ ต้องใช้เครื่องมือสำหรับนักพัฒนา ต้องคงอยู่ข้ามการเริ่มแอปใหม่ หรือมีข้อมูลที่คำนวณซับซ้อน Pinia รวมตรรกะไว้เป็นศูนย์กลางได้ดีกว่าคู่ provide/inject ที่กระจัดกระจาย
ใช้ทั้งสองรูปแบบร่วมกัน
ทั้งสองรูปแบบไม่ได้ขัดแย้งกัน คุณอาจใช้ Pinia สำหรับข้อมูลของแอป และใช้ provide/inject สำหรับบริบทของแผนผังคอมโพเนนต์ที่มีน้ำหนักเบา เช่น ฟอร์มหรือธีมส่วนติดต่อผู้ใช้
provide("formContext", { register, errors });ข้อควรพิจารณาในการทดสอบ
เมื่อทดสอบหน่วยของคอมโพเนนต์ที่ฉีดค่า ให้ส่งค่าผ่านตัวเลือกการเมานต์ของการทดสอบด้วย global.provide เพื่อให้คอมโพเนนต์ได้รับค่าจำลอง
mount(MyComponent, {
global: { provide: { auth: fakeAuth } }
});ตรวจสอบความเข้าใจ
เมื่อใดจึงควรเลือก provide/inject แทน Pinia
ทบทวน
คุณได้เรียนรู้ว่า app.provide เปิดเผยบริการส่วนกลางให้คอมโพเนนต์ทุกตัวใช้งานได้ และสามารถเรียกใช้จากที่ใดก็ได้ด้วยคีย์ผ่าน inject provide/inject เหมาะอย่างยิ่งกับบริบทที่ใช้ร่วมกันและเน้นการอ่าน ส่วน Pinia เหมาะกับสถานะส่วนกลางที่ซับซ้อนและถูกแก้ไขบ่อย พร้อมการสนับสนุนจากเครื่องมือสำหรับนักพัฒนา
คำถามที่พบบ่อย
บทเรียน “Provide/Inject สำหรับสถานะระดับแอป” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Provide/Inject สำหรับสถานะระดับแอป” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Provide/Inject สำหรับสถานะระดับแอป”
app.provide() สำหรับสถานะส่วนกลาง การกำหนดธีม i18n และการหลีกเลี่ยง Pinia ในกรณีง่าย ๆ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “Provide/Inject สำหรับสถานะระดับแอป” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ปัญหาการส่งพร็อพส์ต่อทอดยาว
- provide() ในคอมโพเนนต์แม่
- inject() ในคอมโพเนนต์ลูก
- Provide/Inject สำหรับสถานะระดับแอป