0Pricing
Vue Academy · Lekcja

defineStore: stan, gettery i akcje

Store typu Options a store typu Setup, stan jako funkcja, gettery computed oraz akcje asynchroniczne.

defineStore: stan, gettery i akcje to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Trzy filary store'a

Option store składa się z trzech części: state (dane), getters (wartości pochodne) i actions (metody zmieniające stan). Wszystkie trzy elementy definiuje się wewnątrz defineStore.

Definiowanie store'a

defineStore przyjmuje unikalny ciąg id oraz obiekt opcji. Zwraca composable, który zgodnie z konwencją nazywa się useXxxStore.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

State jest funkcją

Opcja state musi być funkcją zwracającą obiekt. Dzięki temu każda instancja store'a otrzymuje świeży stan, podobnie jak data() w komponentach.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

Odczytywanie stanu

Należy wywołać composable store'a wewnątrz setup, aby uzyskać instancję, a następnie bezpośrednio odczytywać właściwości stanu. Są one reaktywne.

const counter = useCounterStore()
console.log(counter.count) // 0

Gettery są wartościami obliczanymi

getters działają podobnie jak właściwości computed. Każdy getter otrzymuje state jako pierwszy argument i zwraca wartość pochodną. Wyniki są buforowane.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

Korzystanie z gettera

Do gettera odwołuje się jak do właściwości — bez nawiasów. Pinia oblicza go ponownie tylko wtedy, gdy zmienią się jego zależności.

const counter = useCounterStore()
console.log(counter.doubled) // 4

Gettery odwołujące się do innych getterów

Aby użyć innego gettera, należy odwołać się do this zamiast do parametru state. W przypadku this nie należy używać funkcji strzałkowej.

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

Akcje zmieniają stan

actions to metody. Używają this do bezpośredniego odczytywania i modyfikowania stanu. Nie ma commit ani dispatch — wystarczy wywołać metodę.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

Akcje asynchroniczne

Akcje mogą być oznaczone jako async. To właściwe miejsce na wywołania API — należy pobrać dane, a następnie przypisać wynik do stanu.

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

Korzystanie ze store'a w komponencie

Należy zaimportować composable, wywołać go w <script setup>, a następnie używać stanu, getterów i akcji w szablonie.

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

Aktualizowanie wielu pól jednocześnie

Aby jednocześnie zmienić kilka pól stanu, należy użyć $patch. Grupuje on zmiany w pojedynczym wpisie w narzędziach deweloperskich.

counter.$patch({ count: 10, name: 'New' })

Szybkie sprawdzenie

Sprawdź swoją wiedzę o strukturze option store'a.

Podsumowanie

Option store składa się z trzech części:

  • state: funkcja zwracająca obiekt danych.
  • getters: buforowane wartości pochodne, które otrzymują state (lub używają this).
  • actions: metody bezpośrednio modyfikujące stan za pomocą this.

Ze store'a korzysta się, wywołując jego composable wewnątrz setup.

Często zadawane pytania

Czy lekcja „defineStore: stan, gettery i akcje” jest bezpłatna?

Tak — pełny tekst „defineStore: stan, gettery i akcje” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „defineStore: stan, gettery i akcje”?

Store typu Options a store typu Setup, stan jako funkcja, gettery computed oraz akcje asynchroniczne. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „defineStore: stan, gettery i akcje”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Pinia czy Vuex: dlaczego warto przejść
  2. defineStore: stan, gettery i akcje
  3. Komponowanie store i dostęp między store
  4. Trwałość danych Pinia i devtools
← Powrót do Vue Academy