Podstawy Pinia

Witaj w Centralnej Bazie Danych NOVA LAB! Rok 2087 - tu przechowujemy wszystkie krytyczne dane misji marsjańskiej. Podobnie jak główny komputer bazy przechowuje informacje o systemach, załodze i zasobach, Pinia przechowuje globalny stan aplikacji Vue.

Czym jest Pinia?

Pinia to oficjalna biblioteka state management dla Vue 3. Jest następcą Vuex i oferuje znacznie prostszą składnię. Wyobraź sobie ją jako centralny komputer NOVA LAB - jeden punkt kontroli, z którego wszystkie moduły stacji pobierają dane.

Główne zalety Pinia:

• Prostsza składnia niż Vuex (brak mutations!)
• Pełne wsparcie TypeScript
• Świetna integracja z Vue DevTools
• Modułowa architektura - wiele niezależnych stores

Instalacja i konfiguracja

Aby uruchomić Pinia, potrzebujemy dwóch kroków - zainstalować pakiet i podłączyć go do aplikacji:

1npm install pinia

1// main.js
2import { createApp } from 'vue'
3import { createPinia } from 'pinia'
4import App from './App.vue'
5
6const pinia = createPinia()
7const app = createApp(App)
8
9app.use(pinia)
10app.mount('#app')

Funkcja

createPinia()

tworzy instancję Pinia, a

app.use(pinia)

rejestruje ją jako plugin Vue. Od tego momentu wszystkie stores są dostępne w całej aplikacji.

Definiowanie Store - defineStore

Store tworzymy za pomocą

defineStore

. Przyjmuje dwa argumenty: unikalną nazwę store i funkcję setup (Composition API style):

1// stores/mission.js
2import { defineStore } from 'pinia'
3import { ref, computed } from 'vue'
4
5export const useMissionStore = defineStore('mission', () => {
6  // State - dane reaktywne
7  const missionName = ref('Mars Exploration Alpha')
8  const status = ref('active')
9  const crewCount = ref(6)
10
11  // Getters - wartości wyliczane
12  const statusLabel = computed(() =>
13    status.value === 'active' ? 'AKTYWNA' : 'NIEAKTYWNA'
14  )
15
16  // Actions - funkcje modyfikujące state
17  function updateStatus(newStatus) {
18    status.value = newStatus
19  }
20
21  // Zwracamy wszystko co ma być dostępne
22  return {
23    missionName,
24    status,
25    crewCount,
26    statusLabel,
27    updateStatus
28  }
29})

Konwencja nazewnictwa:

useXxxStore

- prefix

use

i suffix

Store

.

Użycie store w komponencie

1<script setup>
2import { useMissionStore } from '@/stores/mission'
3
4const missionStore = useMissionStore()
5
6// Dostęp do state
7console.log(missionStore.missionName)
8
9// Wywołanie action
10missionStore.updateStatus('completed')
11</script>
12
13<template>
14  <div>
15    <h1>{{ missionStore.missionName }}</h1>
16    <p>Status: {{ missionStore.statusLabel }}</p>
17    <button @click="missionStore.updateStatus('paused')">
18      Wstrzymaj misję
19    </button>
20  </div>
21</template>

storeToRefs - reaktywna destrukturyzacja

Zwykła destrukturyzacja traci reaktywność. Użyj

storeToRefs

dla state i getters:

1<script setup>
2import { useMissionStore } from '@/stores/mission'
3import { storeToRefs } from 'pinia'
4
5const store = useMissionStore()
6
7// State i getters - storeToRefs (zachowuje reaktywność)
8const { missionName, status, statusLabel } = storeToRefs(store)
9
10// Actions - normalna destrukturyzacja (to funkcje, nie refs)
11const { updateStatus } = store
12</script>