Vue Academy · บทเรียน

คุณสมบัติทั่วทั้งแอปและ provide/inject ในปลั๊กอิน

app.config.globalProperties.$myPlugin, app.provide() สำหรับการฉีดค่า และการเพิ่มชนิดของ TypeScript

คุณสมบัติทั่วทั้งแอปและ provide/inject ในปลั๊กอิน เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

สองวิธีในการเปิดเผยบริการ

ปลั๊กอินสามารถแบ่งปันฟังก์ชันการทำงานได้สองวิธี ได้แก่ คุณสมบัติส่วนกลาง (รูปแบบคลาสสิกของส่วนติดต่อโปรแกรมประยุกต์แบบตัวเลือก ซึ่งเข้าถึงผ่าน this.$x) และ provide/inject (รูปแบบของส่วนติดต่อโปรแกรมประยุกต์แบบการประกอบ) โค้ดสมัยใหม่มักเลือกใช้ provide/inject ส่วนคุณสมบัติส่วนกลางยังมีประโยชน์สำหรับโค้ดเบสที่ใช้ส่วนติดต่อโปรแกรมประยุกต์แบบตัวเลือก

app.config.globalProperties

app.config.globalProperties.$http = client ทำให้ this.$http พร้อมใช้ในทุกคอมโพเนนต์ที่ใช้ส่วนติดต่อโปรแกรมประยุกต์แบบตัวเลือก ตามธรรมเนียมควรเติมคำนำหน้าด้วย $ เพื่อหลีกเลี่ยงการชนกับข้อมูลของคอมโพเนนต์

import axios from 'axios'

export default {
  install(app, options) {
    const http = axios.create({ baseURL: options.baseURL })
    app.config.globalProperties.$http = http
  }
}

การใช้ $http ในส่วนติดต่อโปรแกรมประยุกต์แบบตัวเลือก

ภายในคอมโพเนนต์ที่ใช้ส่วนติดต่อโปรแกรมประยุกต์แบบตัวเลือก คุณสามารถเข้าถึงคุณสมบัติส่วนกลางผ่าน this ได้

export default {
  async created() {
    const res = await this.$http.get('/users')
    this.users = res.data
  },
  data() {
    return { users: [] }
  }
}

เหตุใดส่วนติดต่อโปรแกรมประยุกต์แบบการประกอบจึงใช้ this ไม่ได้

ใน <script setup> จะไม่มี this ที่ผูกกับอินสแตนซ์ของคอมโพเนนต์ ดังนั้น this.$http จึงใช้ไม่ได้ ส่วนติดต่อโปรแกรมประยุกต์แบบการประกอบจะอ่านค่าที่ฉีดไว้แทน ซึ่งเป็นแนวทางที่แนะนำ

<script setup>
// this is undefined here, so this.$http is NOT available
// use inject() instead
</script>

การใช้ provide ในปลั๊กอิน

เพื่อรองรับส่วนติดต่อโปรแกรมประยุกต์แบบการประกอบ ปลั๊กอินควรใช้ app.provide กับบริการเดียวกันภายใต้คีย์หนึ่งด้วย ให้รองรับทั้งสองแบบ ได้แก่ คุณสมบัติส่วนกลางสำหรับส่วนติดต่อโปรแกรมประยุกต์แบบตัวเลือก และ provide สำหรับส่วนติดต่อโปรแกรมประยุกต์แบบการประกอบ

export const httpKey = Symbol('http')

export default {
  install(app, options) {
    const http = createHttp(options)
    app.config.globalProperties.$http = http // Options API
    app.provide(httpKey, http)               // Composition API
  }
}

การใช้ inject ในส่วนติดต่อโปรแกรมประยุกต์แบบการประกอบ

คอมโพเนนต์อ่านบริการด้วย inject(httpKey) การใช้คีย์ Symbol ที่ส่งออกช่วยหลีกเลี่ยงการสะกดสตริงผิดและเปิดใช้การระบุชนิดข้อมูล

<script setup>
import { inject } from 'vue'
import { httpKey } from './plugins/http'

const http = inject(httpKey)
const res = await http.get('/profile')
</script>

คีย์การฉีดที่มีชนิดข้อมูลด้วย InjectionKey

เพื่อความปลอดภัยของชนิดข้อมูลอย่างสมบูรณ์ ให้กำหนดชนิดของคีย์ด้วย InjectionKey<T> จากนั้น inject จะอนุมานชนิดของค่าที่ถูกต้องโดยอัตโนมัติ

import type { InjectionKey } from 'vue'
import type { AxiosInstance } from 'axios'

export const httpKey: InjectionKey<AxiosInstance> =
  Symbol('http')

// inject(httpKey) is now typed as AxiosInstance | undefined

การกำหนดชนิดให้ $http ด้วยการเพิ่มส่วนขยายโมดูล

เพื่อให้ this.$http มีความปลอดภัยด้านชนิดข้อมูล ให้เพิ่มส่วนขยายให้กับอินเทอร์เฟซ ComponentCustomProperties ของ Vue ในไฟล์ .d.ts จากนั้น TypeScript จะทราบชนิดของ this.$http ในทุกที่

// shims.d.ts
import type { AxiosInstance } from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: AxiosInstance
  }
}

export {}

ส่วนขยายโมดูลอยู่ที่ใด

ส่วนขยายต้องเป็นโมดูล (สังเกต export {} ที่อยู่ท้ายสุด) และต้องถูกรวมโดย tsconfig.json ให้วางไฟล์ไว้ถัดจากปลั๊กอิน เพื่อให้ชนิดข้อมูลติดไปด้วยเมื่อเผยแพร่

// tsconfig.json (excerpt)
{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

คุณสมบัติส่วนกลาง: ใช้อย่างพอประมาณ

คุณสมบัติส่วนกลางสะดวก แต่เป็นการพึ่งพาที่ซ่อนอยู่ ซึ่งทำให้การทดสอบและการทำความเข้าใจคอมโพเนนต์ทำได้ยากขึ้น ควรเลือกใช้ provide/inject ซึ่งระบุชัดเจนและจำกัดอยู่ในขอบเขตของต้นไม้คอมโพเนนต์ เก็บคุณสมบัติส่วนกลางไว้ใช้กับยูทิลิตีที่ควรใช้ทั่วทั้ง app และเหมาะกับส่วนติดต่อโปรแกรมประยุกต์แบบตัวเลือกจริง ๆ

รองรับทั้งสองรูปแบบ

ปลั๊กอินที่สมบูรณ์ควรรองรับทั้งส่วนติดต่อโปรแกรมประยุกต์แบบตัวเลือกและแบบการประกอบ โดยกำหนดคุณสมบัติส่วนกลางและให้ค่าเดียวกันผ่าน provide พร้อมส่งส่วนขยายชนิดข้อมูลสำหรับทั้งคุณสมบัติส่วนกลางและคีย์การฉีดที่มีชนิดข้อมูล ผู้ใช้จึงเลือกแนวทางที่เหมาะกับรูปแบบคอมโพเนนต์ของตนได้

install(app, options) {
  const service = build(options)
  app.config.globalProperties.$service = service
  app.provide(serviceKey, service)
}

ตรวจความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับคุณสมบัติส่วนกลางและ provide/inject ในปลั๊กอิน

ทบทวน

คุณได้เรียนรู้การเปิดเผยบริการของปลั๊กอิน:

app.config.globalProperties.$http ทำให้ส่วนติดต่อโปรแกรมประยุกต์แบบตัวเลือกใช้ this.$http ได้
ส่วนติดต่อโปรแกรมประยุกต์แบบการประกอบไม่มี this แต่ใช้ inject แทน
ให้ทั้งคุณสมบัติส่วนกลางและค่าที่ให้ไว้ เพื่อรองรับการใช้งานได้อย่างครบถ้วน
กำหนดชนิดให้ this.$http ด้วยการเพิ่มส่วนขยายให้ ComponentCustomProperties
ใช้ InjectionKey ที่มีชนิดข้อมูลสำหรับเส้นทางการฉีด

คำถามที่พบบ่อย

บทเรียน “คุณสมบัติทั่วทั้งแอปและ provide/inject ในปลั๊กอิน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คุณสมบัติทั่วทั้งแอปและ provide/inject ในปลั๊กอิน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คุณสมบัติทั่วทั้งแอปและ provide/inject ในปลั๊กอิน”

app.config.globalProperties.$myPlugin, app.provide() สำหรับการฉีดค่า และการเพิ่มชนิดของ TypeScript คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “คุณสมบัติทั่วทั้งแอปและ provide/inject ในปลั๊กอิน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

สถาปัตยกรรมปลั๊กอินและ app.use()
คุณสมบัติทั่วทั้งแอปและ provide/inject ในปลั๊กอิน
ตัวอย่างปลั๊กอินการแจ้งเตือนและ Toast
การเผยแพร่และกำหนดชนิดปลั๊กอิน Vue

← กลับไปที่ Vue Academy