Vue Academy · Les

De basis van Vuex

Begrijp de Vuex-store en gecentraliseerde state.

Les 1 van 313 stappen

De basis van Vuex is een gratis Vue Academy-les op CoddyKit. Dit is les 1 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 3 lessen.

Waarom gecentraliseerd statusbeheer?

Naarmate Vue-apps groeien, wordt het lastig om gegevens tussen veel componenten te delen. Props doorgeven naar beneden en gebeurtenissen naar boven sturen door diep geneste structuren is kwetsbaar. Vuex lost dit op met één gecentraliseerde store waaruit elke component op een voorspelbare manier kan lezen en waarnaar elke component kan schrijven.

De enige bron van waarheid

Vuex volgt een eenrichtingsgegevensstroom. Alle gedeelde toepassingsstatus staat op één plek die de store wordt genoemd. Componenten lezen state uit de store en vragen wijzigingen aan via een gecontroleerde API, zodat je altijd weet waar gegevens vandaan komen en hoe ze veranderen.

Vuex installeren

Vuex 4 is de versie die voor Vue 3 is gebouwd. Installeer deze met je pakketbeheerder en maak de store daarna aan en registreer deze bij je app.

npm install vuex@4

De store maken

Gebruik createStore om een store te definiëren. De optie state is een functie die het initiële reactieve state-object teruggeeft.

import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

De store registreren

Geef de store met app.use(store) door aan je app. Hierdoor is deze via this.$store beschikbaar in elke component.

import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

const app = createApp(App)
app.use(store)
app.mount("#app")

De state-eigenschap

Het object state bevat de gegevens van je app. Het is reactief: wanneer de state verandert, wordt elke component die deze gebruikt automatisch opnieuw gerenderd. Zie het als de data() van je hele app.

state() {
  return {
    todos: [],
    isLoading: false,
    theme: "light"
  }
}

State openen in de Options API

Binnen een component bereik je de store via this.$store.state. Een computed-eigenschap houdt de waarde reactief.

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

State in de template gebruiken

Zodra state via een computed-eigenschap beschikbaar is gemaakt, gebruik je deze in de template zoals elke lokale waarde.

<template>
  <p>Current count: {{ count }}</p>
</template>

De mapState-helper

Veel computed-eigenschappen met de hand schrijven is herhalend werk. De helper mapState genereert ze voor je op basis van een array met statenames.

import { mapState } from "vuex"

export default {
  computed: {
    ...mapState(["count", "user"])
  }
}

mapState met hernoemen

Geef een object door aan mapState om eigenschappen een andere naam te geven of afgeleide waarden uit state te berekenen.

computed: {
  ...mapState({
    total: "count",
    userName: (state) => state.user ? state.user.name : "Guest"
  })
}

State openen in de Composition API

Roep met de Composition API useStore() binnen setup aan om de store-instantie te verkrijgen en lees daarna state via een computed-eigenschap.

import { computed } from "vue"
import { useStore } from "vuex"

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    return { count }
  }
}

Korte controle

Controleer je begrip van de basisprincipes van Vuex.

Beantwoord dit in de interactieve les

Samenvatting

Vuex biedt een gecentraliseerde, reactieve store als enige bron van waarheid. Je bouwt deze met createStore, registreert hem via app.use en leest state uit via computed-eigenschappen of de helper mapState. In de Composition API bereik je de store met useStore(). Vervolgens leer je hoe je die state veilig wijzigt.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 42
Lessen: 156

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “De basis van Vuex” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “De basis van Vuex”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 3 lessen.

Wat leer ik in “De basis van Vuex”?

Begrijp de Vuex-store en gecentraliseerde state. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Vue Academy te beginnen?

Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 3.

Hoe lang duurt de les “De basis van Vuex”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Vue Academy?

Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Vue Academy