Computed z Getter i Setter

Computed może być dwukierunkowe - jak system, który zarówno odczytuje, jak i ustawia parametry misji.

Writable Computed

1<template>
2  <div class="crew-input" style="background: #0a0e27; color: #00ff88;">
3    <input v-model="fullCrewId" placeholder="ID załogi" style="background: #1a1e37; color: #00ff88;" />
4    <p>Sekcja: {{ section }}</p>
5    <p>Numer: {{ number }}</p>
6  </div>
7</template>
8
9<script setup>
10import { ref, computed } from 'vue'
11
12const section = ref('ALPHA')
13const number = ref('001')
14
15const fullCrewId = computed({
16  // Getter - odczyt
17  get() {
18    return `${section.value}-${number.value}`
19  },
20  // Setter - zapis
21  set(newValue) {
22    const parts = newValue.split('-')
23    section.value = parts[0] || ''
24    number.value = parts[1] || ''
25  }
26})
27</script>

Praktyczny Przykład - Konwersja Jednostek Energii

1<template>
2  <div class="energy-converter" style="background: #0a0e27; color: #00ff88;">
3    <label>Energia (Joule):</label>
4    <input v-model.number="energyJoules" type="number" style="background: #1a1e37; color: #00ff88;" />
5
6    <label>Współczynnik konwersji:</label>
7    <input v-model.number="conversionRate" type="number" style="background: #1a1e37; color: #00ff88;" />
8
9    <label>Energia (kWh):</label>
10    <input v-model.number="energyKWh" type="number" style="background: #1a1e37; color: #00ff88;" />
11  </div>
12</template>
13
14<script setup>
15import { ref, computed } from 'vue'
16
17const energyJoules = ref(3600000)
18const conversionRate = ref(3600000) // 1 kWh = 3.6M J
19
20const energyKWh = computed({
21  get() {
22    return Math.round(energyJoules.value / conversionRate.value * 100) / 100
23  },
24  set(kwh) {
25    energyJoules.value = Math.round(kwh * conversionRate.value)
26  }
27})
28</script>

Computed z TypeScript

1import { ref, computed } from 'vue'
2import type { ComputedRef, WritableComputedRef } from 'vue'
3
4const firstName = ref('Leonardo')
5const lastName = ref('da Vinci')
6
7// Readonly computed
8const fullName: ComputedRef<string> = computed(() => {
9  return `${firstName.value} ${lastName.value}`
10})
11
12// Writable computed
13const editableName: WritableComputedRef<string> = computed({
14  get() {
15    return `${firstName.value} ${lastName.value}`
16  },
17  set(value: string) {
18    const parts = value.split(' ')
19    firstName.value = parts[0]
20    lastName.value = parts[1] || ''
21  }
22})