Projekt: System Komunikacji NOVA LAB

Finalny projekt Stacji Komunikacji! Czas zastosowac wszystkie wzorce komunikacji miedzy komponentami w jednym spojnym projekcie. Zbudujesz system zarzadzania modulami stacji NOVA LAB, ktory laczy wszystkie poznane techniki.

Podsumowanie modulu

W tym module poznales kompletny zestaw narzedzi do komunikacji miedzy komponentami Vue:

• Props - jednokierunkowe przekazywanie danych z rodzica do dziecka, z typowaniem, walidacja i wartosciami domyslnymi. Definiowane przez

  defineProps()

• Events (Emit) - komunikacja dziecko-rodzic przez emitowanie zdarzen z opcjonalnym payloadem. Definiowane przez

  defineEmits()

  z walidacja argumentow
• v-model na komponentach - dwukierunkowe wiazanie danych z komponentem, wewnetrznie oparte na props

  modelValue

  i emit

  update:modelValue

  . Mozliwosc wielu v-model z nazwanymi bindings
• Provide/Inject - przekazywanie danych przez wiele poziomow drzewa komponentow bez "prop drilling". Wzorzec readonly + actions dla bezpiecznej modyfikacji stanu
• Fallthrough Attributes - automatyczne dziedziczenie atrybutow HTML, kontrolowane przez

  inheritAttrs

  i

  $attrs

• Zaawansowane wzorce - laczenie props, events, provide/inject i v-model w kompleksowych architekturach

Architektura projektu

1App (provide: modules, actions)
2  ├── StatusBar (inject: modules → computed online count)
3  └── ControlPanel (inject: modules)
4       └── ModuleCard[] (props: module, emit: status-change)

Zadanie

Przeanalizuj kod w edytorze i zrozum jak wszystkie wzorce komunikacji wspolpracuja:

1. App.vue - Provider z centralnym stanem modulow (reactive) i akcjami (provide readonly state + action functions)
2. StatusBar.vue - Inject stanu modulow + computed do wyswietlania statystyk (ile modulow aktywnych, ile offline)
3. ControlPanel.vue - Inject modulow + renderowanie kart za pomoca v-for, przekazywanie danych przez props
4. ModuleCard.vue - Przyjmuje dane przez props, emituje zmiany statusu do rodzica, uzywa inject do wywolywania akcji

Kluczowe obserwacje:

• Stan jest provide z App i inject w StatusBar - dane przeskakuja poziom ControlPanel
• ControlPanel przekazuje moduly przez props do ModuleCard - klasyczny wzorzec parent-child
• ModuleCard uzywa inject do akcji i emit do powiadomien - dwa rozne kanaly komunikacji
• Wzorzec readonly + actions chroni stan przed bezposrednia modyfikacja - tylko App moze zmieniac dane