Vue Academy · leksjon

Getters og modules

Beregn utledet state og organiser store-en i modules.

Leksjon 3 av 313 trinn

Getters og modules er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 3 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 3 leksjoner.

Beregnet state med getters

Noen ganger trenger man avledet state, for eksempel en filtrert liste eller en opptelling. En getter er store-ekvivalenten til en computed property: Den avleder en verdi fra state og mellomlagrer resultatet til avhengighetene endres.

Definere en getter

En getter er en funksjon som mottar state og returnerer en avledet verdi.

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

Getters som bruker andre getters

En getter mottar et andre argument med alle de andre getter-funksjonene, slik at man kan sette dem sammen.

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

Få tilgang til getters

Les getters via this.$store.getters i en computed property.

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

Getters i metodestil

Returner en funksjon fra en getter for å kunne sende med argumenter. Merk at getters i metodestil ikke mellomlagres, men kjøres ved hvert kall.

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

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

Hjelpefunksjonen mapGetters

I likhet med mapState gjør hjelpefunksjonen mapGetters getters automatisk om til computed properties.

import { mapGetters } from "vuex"

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

Hvorfor dele opp i moduler?

En stor store blir vanskelig å vedlikeholde. Vuex lar deg dele store opp i modules, der hver modul har sin egen state, mutations, actions og getters, slik at relatert logikk holdes samlet.

Definere en modul

En modul er ganske enkelt et objekt med de samme alternativene som en store. Moduler registreres under nøkkelen modules.

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

Registrere moduler

Kombiner moduler i root store under modules. Hver nøkkel blir navnet på modulen.

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

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

Navneområder for moduler

Sett namespaced: true slik at en modul får sitt eget scope. Dette unngår navnekollisjoner mellom moduler og gjør strukturen tydelig.

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

Få tilgang til moduler med navneområde

Med navneområder setter du modulnavnet som prefiks når du committer, dispatcher eller leser getters.

// 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")

Kort kontroll

Test kunnskapene dine om getters og moduler.

Besvar den i den interaktive leksjonen

Oppsummering

Getters avleder mellomlagrede verdier fra state og nås via this.$store.getters eller mapGetters. Modules deler en stor store opp i fokuserte enheter. Når du setter namespaced: true, får de hvert sitt scope, slik at du adresserer medlemmene med prefikset module/name. Nå har du hele Vuex-verktøykassen: state, mutations, actions, getters og modules.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 42
Leksjoner: 156

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Getters og modules» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Getters og modules», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 3 leksjoner.

Hva lærer jeg i «Getters og modules»?

Beregn utledet state og organiser store-en i modules. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Vue Academy?

Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.

Hvor lang tid tar leksjonen «Getters og modules»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?

Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Vue Academy