Vue Academy · Lezione

Proprietà globali e provide/inject nei plugin

app.config.globalProperties.$myPlugin, app.provide() per l'iniezione, augmentation di TypeScript.

Proprietà globali e provide/inject nei plugin è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Due modi per esporre i servizi

I plugin possono condividere funzionalità in due modi: tramite proprietà globali, nello stile classico dell'Options API e accessibili tramite this.$x, oppure tramite provide/inject, nello stile della Composition API. Il codice moderno privilegia provide/inject, mentre le proprietà globali restano utili nei codebase che usano l'Options API.

app.config.globalProperties

app.config.globalProperties.$http = client rende this.$http disponibile in ogni componente dell'Options API. Per convenzione si usa il prefisso $ per evitare conflitti con i dati del componente.

import axios from 'axios'

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

Utilizzare $http nell'Options API

All'interno di un componente dell'Options API, la proprietà globale è accessibile tramite this.

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

Perché la Composition API non può usare this

In <script setup> non esiste un this associato all'istanza del componente. Di conseguenza, this.$http non funziona. La Composition API legge invece i valori iniettati, che rappresentano l'approccio consigliato.

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

Provide nel plugin

Per supportare la Composition API, il plugin dovrebbe anche eseguire app.provide sullo stesso servizio usando una chiave. Fornisca entrambi: la proprietà globale per l'Options API e provide per la Composition API.

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 nella Composition API

I componenti leggono il servizio con inject(httpKey). L'utilizzo della chiave Symbol esportata evita errori di battitura nelle stringhe e consente di aggiungere la tipizzazione.

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

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

Chiavi di injection tipizzate con InjectionKey

Per ottenere la massima sicurezza dei tipi, tipizzi la chiave con InjectionKey<T>. In questo modo inject deduce automaticamente il tipo corretto del valore.

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

Tipizzare $http con la module augmentation

Per rendere this.$http sicuro rispetto ai tipi, estenda l'interfaccia ComponentCustomProperties di Vue in un file .d.ts. TypeScript conoscerà quindi il tipo di this.$http in ogni contesto.

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

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

export {}

Dove si trova l'augmentation

L'augmentation deve essere un modulo, come indica il export {} finale, e deve essere inclusa dal Suo tsconfig.json. La collochi accanto al plugin, così i tipi vengono distribuiti insieme al plugin quando viene pubblicato.

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

Proprietà globali: usarle con moderazione

Le proprietà globali sono comode, ma introducono dipendenze nascoste che rendono i componenti più difficili da testare e da comprendere. Preferisca provide/inject, che è esplicito e limitato all'albero dei componenti. Riservi le proprietà globali alle utilità realmente valide per l'intera app e compatibili con l'Options API.

Supportare entrambi gli approcci

Un plugin ben progettato supporta sia l'Options API sia la Composition API: imposti una proprietà globale E fornisca il valore, quindi distribuisca l'augmentation dei tipi sia per la proprietà globale sia per una chiave di injection tipizzata. Chi utilizza il plugin potrà scegliere l'approccio più adatto allo stile del componente.

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

Verifica rapida

Verifichi la Sua comprensione delle proprietà globali e di provide/inject nei plugin.

Riepilogo

Ha imparato a esporre i servizi dei plugin:

app.config.globalProperties.$http rende possibile usare this.$http nell'Options API
La Composition API non dispone di this e utilizza invece inject
Fornisca sia una proprietà globale sia un valore fornito per una copertura completa
Tipizzi this.$http estendendo ComponentCustomProperties
Utilizzi una InjectionKey tipizzata per il percorso basato su inject

Domande Frequenti

La lezione «Proprietà globali e provide/inject nei plugin» è gratuita?

Sì — il testo completo di «Proprietà globali e provide/inject nei plugin» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Proprietà globali e provide/inject nei plugin»?

app.config.globalProperties.$myPlugin, app.provide() per l'iniezione, augmentation di TypeScript. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Proprietà globali e provide/inject nei plugin»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Architettura dei plugin e app.use()
Proprietà globali e provide/inject nei plugin
Esempio di plugin per notifiche e toast
Pubblicazione e tipizzazione dei plugin Vue

← Torna a Vue Academy