JavaScript: Modernes State Management ohne zusätzliche Library in Vue.js 3

Vue.js 3 revolutionierte mit einer neuen Implementierung der Reaktivität und dem modular aufgebauten System das State Management. Es ist an der Zeit, sich anzuschauen, wie sich mithilfe der Compositions API Vue.js-Applikationen ganz ohne die Options API und Vuex reaktiv gestalten lassen. Alle Codebeispiele in diesem Artikel benutzen die Syntax von Single File Components. Für die Erstellung reaktiver Daten wird ref eingesetzt. Ebenfalls möglich wäre der Einsatz von reactive.

Der Artikel nennt im weiteren Verlauf Beispiele von persönlichen Nutzerdaten und Produkten der Nutzer. Man kann sich einen Webshop vorstellen, der die Nutzer auf der Startseite mit vollem Namen begrüßt und Produkte auf einer Merkliste und im Warenkorb anzeigt.

Die APIs von Vue.js

Die Vue.js-API besteht aus mehreren Kategorien. Zur Migration von Vue.js 2 auf Version 3 und Vuex auf Vue.js 3 State Management, werden die Options, die Reactivity und die Composition API benötigt.

Wer bereits Applikationen in Vue.js 2 geschrieben hat, kennt die Options API bereits. Darin finden sich unter anderem die Funktion data, die die reaktiven Attribute einer Single-File Component erzeugt, sowie mixins. Mixins dienen dem Auslagern von Funktionalität zum Verwenden in beliebig vielen Komponenten. Ebenfalls sind die computed properties ein wichtiger Bestandteil vieler Single-File Components. Das sind gecachete Werte, die nur neu berechnet werden, wenn sich die reaktive Abhängigkeit ändert. Seit Vue.js 3 darf sich auch die Funktion setup eine Option nennen. Sie dient als Einstiegspunkt zum Verwenden der Composition API innerhalb einer Komponente. Eine Beispielkomponente sieht damit wie folgt aus (Listing 1):

<template>
  <h1>{{ greeting }} {{ fullName }}!</h1>
</template>

<script>
export default {
  data: () => {
    return {
      greeting: "Hello"
    }
  },
  props: {
    firstName: {
      type: String,
      default: "",
    },
    lastName: {
      type: String,
      default: "",
    }
  },
  computed: {
    fullName: function() {
      return `${this.firstName} ${this.lastName}`
    }
  }
};
</script>

Die Reactivity API umfasst die Verwendung von reactive, ref und ihren zahlreichen Hilfsfunktionen wie toRefs, unref und viele weitere. Ein reaktives Attribut wird Proxy genannt. Ein sehr nützliches Tool ist readonly. Es gibt eine nicht veränderbare Darstellung des reaktiven Proxies wieder. Funktionen wie computed, watch und watchEffect kommen häufig zum Einsatz.

Die Composition API zeichnet sich vor allem durch die Option setup aus, die vor dem Erstellen einer Komponente ausgeführt wird. Dadurch dass die Funktion ausgeführt wird, bevor die Komponente erstellt wurde, gibt es keine Möglichkeit, auf this zuzugreifen, da die Instanz der Komponente noch nicht existiert. Dies ist aber nicht notwendig. Die props wurden im Zyklus bereits vorher aufgelöst, damit sie in der Funktion setup zur Verfügung stehen. Des Weiteren erhält die Funktion Zugriff auf den Kontext. Der Kontext besteht aus Bestandteilen wie emits und slots.

In der Funktion setup lassen sich sämtliche Bestandteile der Reactivity API einsetzen. Dazu zählen Refs und Watcher. Refs enthalten Funktionen zur Erstellung reaktiver Daten. Die Watcher-Funktionen watch und watchEffect hören und reagieren auf Änderungen der reaktiven Daten. Des Weiteren stehen fast alle Lifecycle Hooks zur Verfügung. Die Ausnahmen sind die Hooks beforeCreate und created, da sie mit setup() gleichzusetzen sind.

Somit stehen alle Grundfunktionalitäten der Vue.js 2 Single-File Component, basierend auf der Options API, ebenfalls in der Composition API von Vue.js 3 zur Verfügung. Es gibt allerdings zwei Unterschiede. Ein gravierender Unterschied ist, dass die Anordnung der Elemente den Entwicklerinnen und Entwicklern überlassen wird. Warum das so eine große Rolle spielt, wird im folgenden Abschnitt über die Objektstruktur erklärt. Der andere, kleinere Unterschied ist die Syntax. Beispielsweise heißt der Lifecycle Hook nach dem Mounten der Komponente in der Composition API nicht mehr mounted, sondern onMounted. Die Erstellung einer Computed Property erfolgt mit der Übergabe einer Getter-Funktion. Zurückgegeben wird ein reaktives ref-Objekt.

Listing 2 zeigt ein Beispiel einer Funktionalität mit der Composition API:

const firstName = ref("");
const lastName = ref("");
const fullName = computed(() => 
           firstName.value + " " + lastName.value);

Die vollständige Komponente als Beispiel (Listing 3):

<template>
  <h1>Hello {{ fullName }}!</1>
</template>

<script>
export default {
  setup(props) {
    const firstName = ref("");
    const lastName = ref("");
    const fullName = computed(() =>
          firstName.value + " " + lastName.value);

    return {
      fullName,
    }
  },
};
</script>