Vue Academy · Lekcja

Gettery i moduły

Obliczą Państwo stan pochodny i uporządkują store w moduły.

Gettery i moduły to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 3. 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 3 lekcji w sumie.

Stan obliczany za pomocą getterów

Czasami potrzebujesz stanu pochodnego, na przykład przefiltrowanej listy lub liczby elementów. Getter jest odpowiednikiem właściwości obliczanej w store: wyprowadza wartość ze stanu i przechowuje wynik w pamięci podręcznej do momentu zmiany jego zależności.

Definiowanie gettera

Getter to funkcja, która otrzymuje stan i zwraca wartość pochodną.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  }
}

Gettery korzystające z innych getterów

Getter otrzymuje drugi argument zawierający wszystkie pozostałe gettery, dzięki czemu możesz je ze sobą łączyć.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  },
  completedCount(state, getters) {
    return getters.completedTodos.length
  }
}

Uzyskiwanie dostępu do getterów

Odczytuj gettery za pomocą this.$store.getters we właściwości obliczanej.

computed: {
  doneCount() {
    return this.$store.getters.completedCount
  }
}

Gettery w stylu metod

Zwróć funkcję z gettera, aby przekazywać argumenty. Pamiętaj, że gettery w stylu metod nie korzystają z pamięci podręcznej i są wykonywane przy każdym wywołaniu.

getters: {
  todoById: (state) => (id) => {
    return state.todos.find(t => t.id === id)
  }
}

// usage
this.$store.getters.todoById(3)

Pomocnik mapGetters

Podobnie jak mapState, pomocnik mapGetters automatycznie przekształca gettery we właściwości obliczane.

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters(["completedTodos", "completedCount"])
  }
}

Dlaczego dzielić store na moduły?

Pojedynczy, duży store staje się trudny w utrzymaniu. Vuex pozwala podzielić store na moduły, z których każdy ma własny stan, mutacje, akcje i gettery, dzięki czemu powiązana logika pozostaje razem.

Definiowanie modułu

Moduł to po prostu obiekt z takimi samymi opcjami jak store. Moduły rejestruje się pod kluczem modules.

const cart = {
  state: () => ({ items: [] }),
  mutations: {
    addItem(state, item) { state.items.push(item) }
  },
  getters: {
    itemCount: (state) => state.items.length
  }
}

Rejestrowanie modułów

Połącz moduły w głównym store pod kluczem modules. Każdy klucz staje się nazwą modułu.

import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"

export const store = createStore({
  modules: { cart, user }
})

Przestrzenie nazw modułów

Ustaw namespaced: true, aby moduł otrzymał własny zakres. Pozwala to uniknąć konfliktów nazw między modułami i sprawia, że struktura jest jednoznaczna.

const cart = {
  namespaced: true,
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length
  }
}

Dostęp do modułów z przestrzeniami nazw

W przypadku przestrzeni nazw dodaj nazwę modułu jako prefiks podczas zatwierdzania mutacji, wysyłania akcji lub odczytywania getterów.

// module state lives under the module key
this.$store.state.cart.items

// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat getterów i modułów.

Podsumowanie

Gettery wyprowadzają z pamięci podręcznej wartości na podstawie stanu; można uzyskać do nich dostęp przez this.$store.getters lub mapGetters. Moduły dzielą duży store na wyspecjalizowane jednostki; ustawienie namespaced: true ogranicza ich zakres, dzięki czemu odwołujesz się do elementów za pomocą prefiksu module/name. Masz już pełny zestaw narzędzi Vuex: stan, mutacje, akcje, gettery i moduły.

Często zadawane pytania

Czy lekcja „Gettery i moduły” jest bezpłatna?

Tak — pełny tekst „Gettery i moduły” 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 3 lekcji w sumie.

Co nauczysz się w „Gettery i moduły”?

Obliczą Państwo stan pochodny i uporządkują store w moduły. Ć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 3 z 3.

Ile czasu zajmuje lekcja „Gettery i moduły”?

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

Podstawy Vuex
Mutacje i akcje
Gettery i moduły

← Powrót do Vue Academy