Leg uit wat Vuex is, in je eigen woorden.

Vuex is een bibliotheek voor toestandbeheer voor Vue.js-toepassingen. Het is een gecentraliseerde opslagplaats voor alle componenten van de toepassing, waar je gegevens kunt opslaan die toegankelijk moeten zijn vanuit verschillende delen van de toepassing zonder ze via props of gebeurtenissen door te geven.

Vuex bestaat uit de volgende hoofdonderdelen:

• State: Een object dat alle gedeelde gegevens van de toepassing bevat. Het is de "enige bron van waarheid".
• Getters: Functies om gegevens uit de staat te halen. Ze lijken op computed properties in Vue-componenten.
• Mutations: Functies die de staat direct wijzigen. Ze zijn synchrone. De enige manier om de state te veranderen is door een mutation aan te roepen.
• Actions: Functies die asynchrone operaties kunnen bevatten. Ze wijzigen de staat niet direct, maar roepen mutations aan.
• Modules: Hiermee kun je de store opdelen in modules, elk met hun eigen state, getters, mutations en actions, voor grote toepassingen.

Werking:

1. Componenten krijgen gegevens uit state via getters.
2. Gebruikersacties (klikken, invoer) roepen actions aan.
3. Actions kunnen asynchrone operaties uitvoeren (bijvoorbeeld API-aanvragen).
4. Actions roepen mutations aan om de state te wijzigen.
5. Wijzigingen in state worden automatisch en reactief de componenten bijgewerkt.

Voorbeeld:

Stel dat we een teller hebben waarvan de waarde toegankelijk moet zijn vanuit verschillende componenten.

// store.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

<!-- Component.vue -->
<template>
  <div>
    <p>Teller: {{ count }}</p>
    <p>Verdubbelde teller: {{ doubleCount }}</p>
    <button @click="increment">Toevoegen</button>
    <button @click="decrement">Verwijderen</button>
    <button @click="incrementAsync">Asynchroon toevoegen</button>
  </div>
</template>

<script>
import { useStore } from 'vuex';
import { computed } from 'vue';

export default {
  setup() {
    const store = useStore();

    const count = computed(() => store.state.count);
    const doubleCount = computed(() => store.getters.doubleCount);

    const increment = () => store.commit('increment');
    const decrement = () => store.commit('decrement');
    const incrementAsync = () => store.dispatch('incrementAsync');

    return {
      count,
      doubleCount,
      increment,
      decrement,
      incrementAsync
    };
  }
};
</script>

Vuex helpt bij het organiseren van het toestandbeheer van de toepassing, waardoor het voorspelbaarder wordt en gemakkelijker te debuggen, vooral in grote en complexe projecten.