Zaawansowane Wzorce Komunikacji

Teraz gdy znasz wszystkie narzędzia komunikacji w Vue, zobaczmy jak je łączyć w zaawansowane wzorce - jak kompletny system łączności NOVA LAB.

Kiedy użyć którego wzorca?

| Wzorzec | Kiedy użyć | |---------|-----------| | Props | Przekazanie danych rodzic → dziecko (1 poziom) | | Events | Komunikacja dziecko → rodzic (1 poziom) | | v-model | Two-way binding (formularze, inputy) | | Provide/Inject | Głęboka komunikacja (2+ poziomów) | | Pinia | Globalny stan aplikacji |

Wzorzec: Readonly Provide + Actions

Bezpieczny wzorzec - potomkowie nie mogą modyfikować stanu bezpośrednio:

1<!-- Provider -->
2<script setup>
3import { provide, ref, readonly } from 'vue'
4
5const state = ref({ theme: 'dark', lang: 'pl' })
6
7provide('state', readonly(state))
8provide('updateState', (key, value) => {
9  state.value[key] = value
10})
11</script>
12
13<!-- Consumer -->
14<script setup>
15import { inject } from 'vue'
16
17const state = inject('state')         // readonly
18const updateState = inject('updateState') // action
19
20updateState('theme', 'light') // OK - przez action
21// state.value.theme = 'light' // Error - readonly!
22</script>

Wzorzec: defineExpose

Udostępnianie metod komponentu rodzicowi przez ref:

1<!-- Child.vue -->
2<script setup>
3import { ref } from 'vue'
4
5const count = ref(0)
6const reset = () => { count.value = 0 }
7const validate = () => count.value > 0
8
9defineExpose({ reset, validate })
10</script>
11
12<!-- Parent.vue -->
13<script setup>
14import { ref } from 'vue'
15
16const childRef = ref(null)
17
18const handleReset = () => {
19  childRef.value.reset()
20  const isValid = childRef.value.validate()
21}
22</script>
23
24<template>
25  <Child ref="childRef" />
26  <button @click="handleReset">Reset Child</button>
27</template>

Kompletny Przepływ Danych

1App (provide: globalny stan)
2  └── Layout
3       ├── Header (inject: theme, user)
4       │    └── Avatar (props: user.avatar)
5       │         └── emit('click') → Header
6       └── Content
7            └── Page (props z routera)
8                 └── Form (v-model: dane)
9                      └── emit('submit') → Page → API