Provide / Inject

Gdy NOVA LAB nadaje komunikat dla całej kolonii, nie przesyła go przez każdy moduł z osobna - używa systemu broadcast. W Vue ten mechanizm to provide/inject - przekazywanie danych przez wiele poziomów bez prop drilling.

Problem Prop Drilling

Bez provide/inject musisz przekazywać props przez każdy poziom:

1App → Layout → Page → Sidebar → DeepChild
2(theme)  (theme)  (theme)  (theme)  (theme) 😩

Z provide/inject:

1App (provide theme) → ... → DeepChild (inject theme) 🎉

Podstawy Provide/Inject

1<!-- Provider (przodek) -->
2<script setup>
3import { provide, ref } from 'vue'
4
5const theme = ref('dark')
6provide('theme', theme)
7provide('labName', 'NOVA LAB Alpha')
8</script>
9
10<!-- Consumer (dowolny potomek) -->
11<script setup>
12import { inject } from 'vue'
13
14const theme = inject('theme')
15const labName = inject('labName')
16
17// Z domyślną wartością
18const mode = inject('mode', 'standard')
19</script>

Reaktywne Provide

Przekazuj

ref()

reactive()

1<!-- Provider -->
2<script setup>
3import { provide, ref, readonly } from 'vue'
4
5const count = ref(0)
6
7// Readonly - potomek nie może modyfikować
8provide('count', readonly(count))
9
10// Akcje do modyfikacji
11provide('increment', () => count.value++)
12</script>
13
14<!-- Consumer -->
15<script setup>
16import { inject } from 'vue'
17
18const count = inject('count')       // readonly ref
19const increment = inject('increment') // funkcja
20</script>

App-level Provide

Globalne provide w

main.ts

1const app = createApp(App)
2app.provide('apiUrl', 'https://mars-api.novalab.space')
3app.mount('#app')

Typowane Klucze (InjectionKey)

1import type { InjectionKey, Ref } from 'vue'
2
3export const themeKey: InjectionKey<Ref<string>> = Symbol('theme')
4
5// Provider
6provide(themeKey, ref('dark'))
7
8// Consumer - TypeScript wie że to Ref<string>
9const theme = inject(themeKey)