Provide / Inject

Ce guide suppose que vous avez déjà lu l 'introduction du Composition API et les Fondamentaux de la réactivité. Lisez cela d'abord si vous êtes nouveau dans le composition API.

Nous pouvons également utiliser provide/inject avec le Composition API. Les deux ne peuvent être appelés que pendant setup () avec une instance active courante.

Contexte du scénario

Supposons que nous voulions réécrire le code suivant, qui contient un composant MyMap qui fournit un composantMyMarker avec l'emplacement de l'utilisateur, en utilisant le composition API.

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import MyMarker from './MyMarker.vue'

export default {
  components: {
    MyMarker
  },
  provide: {
    location: 'North Pole',
    geolocation: {
      longitude: 90,
      latitude: 135
    }
  }
}
</script>

<!-- src/components/MyMarker.vue -->
<script>
export default {
  inject: ['location', 'geolocation']
}
</script>

Utiliser provide

Lorsqu'on utilise provide dans setup (), on commence par importer explicitement la méthode depuisvue. Cela nous permet de définir chaque propriété avec sa propre invocation de provide.

La fonction provide vous permet de définir la propriété à travers deux paramètres:

1. Le nom de la propriété (type <String>)
2. La valeur de la propriété

En utilisant notre composant MyMap, les valeurs fournies peuvent être refactorisées comme suit:

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue

export default {
  components: {
    MyMarker
  },
  setup() {
    provide('location', 'North Pole')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
  }
}
</script>

Utiliser inject

Lorsque vous utilisez inject dans setup (), nous devons également l'importer explicitement depuis vue. Une fois que nous le faisons, cela nous permet de l'invoquer pour définir comment nous voulons l'exposer à notre composant.

The inject function takes two parameters:

1. Le nom de la propriété à injecté
2. Une valeur par defaut (Optionelle)

En utilisant notre composant MyMarker, nous pouvons le refactoriser avec le code suivant:

<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'

export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')

    return {
      userLocation,
      userGeolocation
    }
  }
}
</script>

Réactivité

Ajouter de la réactivité

Pour ajouter de la réactivité entre les valeurs provide et inject, nous pouvons utiliser un ref ou reactive lorsqu'on fournit une valeur.

En utilisant notre composant MyMap, notre code peut être mis à jour comme suit:

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue

export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    provide('location', location)
    provide('geolocation', geolocation)
  }
}
</script>

Maintenant, si quelque chose change dans l'une ou l'autre des propriétés, le composant MyMarker sera également mis à jour automatiquement!

Muter des propriétés réactives

Lorsque vous utilisez des valeurs provide / inject, il est recommandé de conserver toutes les mutations des propriétés réactives à l'intérieur du provider chaque fois que possible.

Par exemple, dans le cas où nous devions changer l'emplacement de l'utilisateur, nous le ferions idéalement à l'intérieur de notre composant MyMap.

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue

export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    provide('location', location)
    provide('geolocation', geolocation)

    return {
      location
    }
  },
  methods: {
    updateLocation() {
      this.location = 'South Pole'
    }
  }
}
</script>

Cependant, il y a des moments où nous devons mettre à jour les données à l'intérieur du composant où les données sont injectées. Dans ce scénario, nous vous recommandons de fournir une méthode responsable de la mutation de la propriété réactive.

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue

export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

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

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

<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'

export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')
    const updateUserLocation = inject('updateLocation')

    return {
      userLocation,
      userGeolocation,
      updateUserLocation
    }
  }
}
</script>

Enfin, nous vous recommandons d'utiliser readonly sur la propriété fournie si vous voulez vous assurer que les données transmises via provide ne peuvent pas être mutées par le composant injecté.

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide, reactive, readonly, ref } from 'vue'
import MyMarker from './MyMarker.vue

export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

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

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