Provide / Inject (Dostarczanie / Wstrzykiwanie) ​

Ta strona zakłada, że przeczytałeś już Podstawy Komponentów. Przeczytaj je najpierw, jeśli dopiero zaczynasz pracę z komponentami.

Przekazywanie właściwości (Prop Drilling) ​

Zazwyczaj, gdy potrzebujemy przekazać dane z komponentu nadrzędnego do potomnego, używamy właściwości (props). Jednakże, wyobraź sobie przypadek, w którym mamy rozbudowane drzewo komponentów, a głęboko zagnieżdżony komponent potrzebuje czegoś od bardzo odległego komponentu przodka. Używając tylko właściwości (props), musielibyśmy przekazywać tę samą właściwość przez cały łańcuch komponentów nadrzędnych:

Zauważ, że chociaż komponent <Footer> może w ogóle nie potrzebować tych właściwości, to nadal musi je zadeklarować i przekazać dalej, aby <DeepChild> mógł uzyskać do nich dostęp. Jeśli łańcuch komponentów nadrzędnych jest dłuższy, więcej komponentów zostałoby dotkniętych po drodze. Jest to nazywane "props drilling" (przekazywaniem właściwości) i zdecydowanie nie jest przyjemne w obsłudze.

Możemy rozwiązać problem przekazywania właściwości za pomocą provide i inject. Komponent nadrzędny może służyć jako dostawca zależności dla wszystkich swoich potomków. Każdy komponent w drzewie potomnym, niezależnie od tego, jak głęboko się znajduje, może wstrzykiwać (inject) zależności dostarczone przez komponenty w jego łańcuchu nadrzędnym.

Provide (Dostarczanie) ​

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

provide(/* klucz */ 'message', /* wartość */ 'hello!')
</script>

import { provide } from 'vue'

export default {
  setup() {
    provide(/* klucz */ 'message', /* wartość */ 'hello!')
  }
}

import { ref, provide } from 'vue'

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

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

export default {
  data() {
    return {
      message: 'hello!'
    }
  },
  provide() {
    // użyj składni funkcji, aby uzyskać dostęp do `this`
    return {
      message: this.message
    }
  }
}

Dostarczanie na poziomie aplikacji (App-level Provide) ​

Oprócz dostarczania danych w komponencie możemy także dostarczać je na poziomie aplikacji:

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* klucz */ 'message', /* wartość */ 'hello!')

Wartości dostarczone na poziomie aplikacji są dostępne dla wszystkich komponentów renderowanych w aplikacji. Jest to szczególnie przydatne podczas pisania wtyczek, ponieważ wtyczki zazwyczaj nie mogłyby dostarczać wartości za pomocą komponentów.

Wstrzykiwanie (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) // wstrzyknięta wartość
  }
}

export default {
  inject: ['message'],
  data() {
    return {
      // initial data based on injected value
      fullMessage: this.message
    }
  }
}

export default {
  inject: {
    /* lokalny klucz */ localMessage: {
      from: /* klucz wstrzykiwany */ 'message'
    }
  }
}

Domyślne wartości wstrzyknięć ​

By default, inject assumes that the injected key is provided somewhere in the parent chain. In the case where the key is not provided, there will be a runtime warning.

If we want to make an injected property work with optional providers, we need to declare a default value, similar to props:

// `value` przyjmie wartość "domyślna wartość"
// jeśli nie zostanie dodana wartość dla "message"
const value = inject('message', 'domyślna wartość')

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

export default {
  // składnia obiektowa jest wymagana
  // podczas deklarowania wartości domyślnych dla wstrzyknięć
  inject: {
    message: {
      from: 'message', // jest to opcjonalne jeśli używamy tego samego klucza do wstrzyknięcia
      default: 'wartość domyślna'
    },
    user: {
      // użyj funkcji fabrykującej dla wartości nieprymitywnych, których utworzenie
      // jest kosztowne lub takich, które powinny być unikalne dla każdej instancji komponentu
      default: () => ({ name: 'John' })
    }
  }
}

Praca z reaktywnością ​

<!-- wewnątrz komponentu dostarczającego -->
<script setup>
import { provide, ref } from 'vue'

const location = ref('North Pole')

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

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

<!-- wewnątrz komponentu wstrzykującego -->
<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: 'witaj!'
    }
  },
  provide() {
    return {
      // jawnie zdefiniuj właściwość obliczaną
      message: computed(() => this.message)
    }
  }
}

Praca z Symbolami jako kluczami ​

Do tej pory używaliśmy w przykładach kluczy wstrzykiwania jako ciągów znaków. Jeśli pracujesz nad dużą aplikacją z wieloma dostawcami zależności lub tworzysz komponenty, które będą używane przez innych programistów, najlepiej jest używać kluczy wstrzykiwania typu Symbol, aby uniknąć potencjalnych kolizji.

Zalecane jest eksportowanie Symboli w dedykowanym pliku:

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

// w komopnencie dostarczającym
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'

provide(myInjectionKey, {
  /* dane do wstrzyknięcia */
})

// w komponencie wstrzykującym
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'

const injected = inject(myInjectionKey)

// w komponencie dostarczającym
import { myInjectionKey } from './keys.js'

export default {
  provide() {
    return {
      [myInjectionKey]: {
        /* dane do wstrzyknięcia */
      }
    }
  }
}

// w komponencie wstrzykującym
import { myInjectionKey } from './keys.js'

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