State w Pinia

State to reaktywne dane przechowywane w store - jak baza danych głównego komputera NOVA LAB. Każdy odczyt sensora, każdy parametr misji jest tu zapisany i dostępny dla wszystkich modułów stacji.

Definiowanie state

W Composition API style state to zwykłe

ref()

i

reactive()

:

1import { defineStore } from 'pinia'
2import { ref, reactive } from 'vue'
3
4export const useResourceStore = defineStore('resources', () => {
5  // Proste wartości - ref()
6  const oxygen = ref(98.5)
7  const water = ref(1250)
8  const energy = ref(87)
9  const isEmergency = ref(false)
10
11  // Obiekty - reactive() lub ref()
12  const crew = reactive({
13    commander: 'Nova',
14    engineer: 'Atlas',
15    scientist: 'Darwin'
16  })
17
18  // Tablice
19  const logs = ref([])
20
21  return { oxygen, water, energy, isEmergency, crew, logs }
22})

Modyfikacja state

State można modyfikować bezpośrednio w actions lub z komponentu:

1export const useResourceStore = defineStore('resources', () => {
2  const oxygen = ref(98.5)
3
4  // Action modyfikuje state
5  function consumeOxygen(amount) {
6    oxygen.value = Math.max(0, oxygen.value - amount)
7  }
8
9  return { oxygen, consumeOxygen }
10})

1<script setup>
2const store = useResourceStore()
3
4// Bezpośrednia modyfikacja (działa, ale actions są lepsze)
5store.oxygen = 95.0
6
7// Przez action (zalecane)
8store.consumeOxygen(3.5)
9</script>

$patch - aktualizacja wielu właściwości

$patch

pozwala zaktualizować wiele właściwości state jednocześnie - to bardziej wydajne niż modyfikacja po jednej:

1const store = useResourceStore()
2
3// Obiekt patch - proste nadpisanie
4store.$patch({
5  oxygen: 95.0,
6  water: 1200,
7  energy: 82,
8  isEmergency: false
9})
10
11// Funkcja patch - dla złożonych operacji
12store.$patch((state) => {
13  state.oxygen -= 3.5
14  state.logs.push({
15    type: 'consumption',
16    timestamp: Date.now()
17  })
18})

$reset - przywracanie stanu początkowego

W Options API style

$reset()

działa automatycznie. W Composition API musisz zdefiniować własną funkcję reset:

1export const useResourceStore = defineStore('resources', () => {
2  const oxygen = ref(100)
3  const water = ref(1500)
4  const energy = ref(100)
5
6  // Custom reset dla Composition API
7  function $reset() {
8    oxygen.value = 100
9    water.value = 1500
10    energy.value = 100
11  }
12
13  return { oxygen, water, energy, $reset }
14})
15
16// Użycie
17const store = useResourceStore()
18store.$reset() // Przywraca wartości początkowe

$state - dostęp do całego stanu

1const store = useResourceStore()
2
3// Odczyt całego state
4const snapshot = store.$state
5
6// Nadpisanie całego state
7store.$state = {
8  oxygen: 100,
9  water: 1500,
10  energy: 100,
11  isEmergency: false,
12  crew: { commander: 'Nova' },
13  logs: []
14}