Provide / Inject ​

Si assume che tu abbia già letto le Basi dei componenti. Leggi prima quello se sei nuovo al concetto di componente.

Prop drilling ​

Solitamente, quando abbiamo bisogno di passare dati dal genitore a un componente figlio, utilizziamo props. Tuttavia, immagina il caso in cui abbiamo un albero di componenti ampio e un componente profondamente nidificato ha bisogno di qualcosa da un componente antenato distante. Con solo le props, dovremmo passare la stessa prop lungo l'intera catena genitore:

Nota che anche se il componente <Footer> potrebbe non essere interessato a queste props, deve comunque dichiararle e passarle in avanti affinché <DeepChild> possa accedervi. Se c'è una catena genitore più lunga, più componenti sarebbero influenzati lungo il percorso. Questo viene chiamato "props drilling" e sicuramente non è divertente da gestire.

Possiamo risolvere il problema del props drilling con provide e inject. Un componente genitore può fungere da 'fornitore di dipendenze' per tutti i suoi discendenti. Qualsiasi componente nell'albero dei discendenti, indipendentemente da quanto sia profondo, può iniettare dipendenze fornite dai componenti nella sua catena genitore.

Provide ​

<script setup>
import { provide } from 'vue'

provide(/* chiave */ 'messaggio', /* valore */ 'ciao!')
</script>

import { provide } from 'vue'

export default {
  setup() {
    provide(/* chiave */ 'messaggio', /* valore */ 'ciao!')
  }
}

import { ref, provide } from 'vue'

const count = ref(0)
provide('key', count)

export default {
  provide: {
    message: 'ciao!'
  }
}

export default {
  data() {
    return {
      message: 'ciao!'
    }
  },
  provide() {
    // utilizza la sintassi della funzione in modo che possiamo accedere a `this`
    return {
      message: this.message
    }
  }
}

Provide a livello app ​

Oltre a fornire dati in un componente, possiamo anche fornirli a livello di app:

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* chiave */ 'messaggio', /* valore */ 'ciao!')

Le forniture a livello di app sono disponibili per tutti i componenti renderizzati nell'app. Questo è particolarmente utile quando si scrivono plugins, poiché i plugin di solito non possono fornire valori utilizzando componenti.

Inject ​

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // valore iniettato
  }
}

export default {
  inject: ['message'],
  data() {
    return {
      // dati iniziali basati sul valore iniettato
      fullMessage: this.message
    }
  }
}

export default {
  inject: {
    /* chiave locale */ localMessage: {
      from: /* chiave di iniezione */ 'message'
    }
  }
}

Valori predefiniti di Inject ​

Per impostazione predefinita inject assume che la chiave di iniezione sia fornita da qualche parte nella catena di genitori. Nel caso in cui la chiave non sia fornita, verrà emesso un avviso durante l'esecuzione.

Se vogliamo rendere una proprietà iniettata funzionante con fornitori opzionali, dobbiamo dichiarare un valore predefinito, simile alle props:

// `value` sarà "default value"
// se nessun dato corrispondente a "message" è stato fornito
const value = inject('message', 'default value')

const value = inject('key', () => new ExpensiveClass(), true)

export default {
  // la sintassi dell'oggetto è obbligatoria
  // quando si dichiarano valori predefiniti per le iniezioni
  inject: {
    message: {
      from: 'message', // questo è facoltativo se si utilizza la stessa chiave per l'iniezione
      default: 'default value'
    },
    user: {
      // utilizzare una funzione factory per i valori non primitivi che sono costosi
      // da creare, o quelli che dovrebbero essere unici per l'istanza del componente.
      default: () => ({ name: 'John' })
    }
  }
}

Lavorare con la reattività ​

<!-- all'interno del componente provider -->
<script setup>
import { provide, ref } from 'vue'

const location = ref('North Pole')

function updateLocation() {
  location.value = 'South Pole'
}

provide('location', {
  location,
  updateLocation
})
</script>

<!-- all'interno del componente injector -->
<script setup>
import { inject } from 'vue'

const { location, updateLocation } = inject('location')
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

<script setup>
import { ref, provide, readonly } from 'vue'

const count = ref(0)
provide('read-only-count', readonly(count))
</script>

import { computed } from 'vue'

export default {
  data() {
    return {
      message: 'ciao!'
    }
  },
  provide() {
    return {
      // fornisci esplicitamente una computed property
      message: computed(() => this.message)
    }
  }
}

Lavorare con symbol keys ​

Finora, abbiamo utilizzato chiavi di iniezione di tipo stringa negli esempi. Se stai lavorando in un'applicazione di grandi dimensioni con molti fornitori di dipendenze o stai creando componenti destinate ad essere utilizzate da altri sviluppatori, è meglio utilizzare chiavi di iniezione di tipo Symbol per evitare potenziali collisioni.

Si consiglia di esportare i Symbols in un file dedicato:

// keys.js
export const myInjectionKey = Symbol()

// nel componente provider
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'

provide(myInjectionKey, {
  /* dati da fornire */
})

// nel componente iniettore
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'

const injected = inject(myInjectionKey)

// nel componente provider
import { myInjectionKey } from './keys.js'

export default {
  provide() {
    return {
      [myInjectionKey]: {
        /* dati da fornire */
      }
    }
  }
}

// nel componente iniettore
import { myInjectionKey } from './keys.js'

export default {
  inject: {
    injected: { from: myInjectionKey }
  }
}