6. Beispiel [nuxt-03]: nuxtServerInit

Das Projekt [nuxt-03] zielt darauf ab, eine Funktion des Stores [Vuex] namens [nuxtServerInit] vorzustellen. Sie ermöglicht es dem Server, den Speicher [Vuex] zu initialisieren, so wie es die Funktion [fetch] tut. Im Gegensatz zur Funktion [fetch] wird die Funktion [nuxtServerInit] jedoch niemals vom Client ausgeführt.

Das Projekt [nuxt-03] wird zunächst durch Kopieren des Projekts [nuxt-01] erstellt, aus dem die Seite [page2] aus dem Ordner [pages] und aus der Komponente [navigation] entfernt wird. Der Ordner [store] wird durch Kopieren des Ordners [nuxt-02/store] erstellt.

6.1. Der Store [Vuex]

Der Store [Vuex] wird durch die folgende Datei [store/index.js] implementiert:


/* eslint-disable no-console */
export const state = () => ({
  // Zähler
  counter: 0
})

export const mutations = {
  // Erhöhung des Zählers um einen Wert [inc]
  increment(state, inc) {
    state.counter += inc
  }
}

export const actions = {
  async nuxtServerInit(store, context) {
    // Wer führt diesen Code aus?
    console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
    // Wir warten auf das Ende eines Promises
    await new Promise(function(resolve, reject) {
      // Normalerweise gibt es hier eine asynchrone Funktion
      // man simuliert sie mit einer Wartezeit von einer Sekunde
      setTimeout(() => {
        // Erfolg
        resolve()
      }, 1000)
    })
    // Der Speicher wird geändert
    store.commit('increment', 34)
    // Protokoll
    console.log('nuxtServerInit commit terminé')
  }
}

Zeilen 1–12: entsprechen denen im Projekt [nuxt-02];
Zeilen 14–32: Es wird ein Objekt [actions] exportiert. Dies ist ein reservierter Begriff aus dem Store von [Vuex];
Zeile 15: Die Funktion [nuxtServerInit] wird definiert. Diese wird beim Start der Anwendung vom Server ausgeführt. Ihre übliche Aufgabe besteht darin, einen Store [Vuex] mithilfe externer Daten zu initialisieren, die über eine asynchrone Funktion abgerufen wurden. [nuxt] wartet, bis diese Funktion ihre Ergebnisse zurückgibt, bevor der Lebenszyklus der angeforderten Seite gestartet wird. Die Funktion erhält zwei Parameter:
- den zu initialisierenden Speicher [Vuex];
- den aktuellen Kontext [nuxt];
Zeilen 19–26: Es wird auf das Ende der asynchronen Aktion gewartet, hier eine künstliche Wartezeit von einer Sekunde (Zeile 15);
Zeile 28: Dem Zähler wird der Wert 34 zugewiesen;
Zeilen 17 und 30: Log-Einträge zur Verfolgung des Ablaufs der Funktion [nuxtServerInit];

6.2. Die Seite [index]

Die Seite [index] sieht wie folgt aus:


<!-- Seite [index] -->
<template>
  <Layout :left="true" :right="true">
    <!-- Navigation -->
    <Navigation slot="left" />
    <!-- Meldung-->
    <b-alert slot="right" show variant="warning"> Home - value= {{ value }} </b-alert>
  </Layout>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */

import Layout from '@/components/layout'
import Navigation from '@/components/navigation'
export default {
  name: 'Home',
  // verwendete Komponenten
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // Lebenszyklus
  beforeCreate() {
    // Client und Server
    console.log('[home beforeCreate]')
  },
  created() {
    // Client und Server
    this.value = this.$store.state.counter
    console.log('[home created], value=', this.value)
  },
  beforeMount() {
    // nur Client
    console.log('[home beforeMount]')
  },
  mounted() {
    // nur Client
    console.log('[home mounted]')
  }
}
</script>

Zeile 37: Der von der Funktion [nuxtServerInit] initialisierte Zählerwert wird der Eigenschaft [value] aus Zeile 27 zugewiesen. Dieser Wert wird in Zeile 7 angezeigt;
Zeile 37 wird sowohl vom Server als auch vom Client ausgeführt. In beiden Fällen erhält die Eigenschaft [value] denselben Wert, wodurch sichergestellt wird, dass die vom Server generierte Seite mit der vom Client generierten Seite identisch ist;

6.3. Die Seite [page1]

Die Seite [page1] wird durch Kopieren der Seite [index] erstellt. Anschließend wird ihr Text so geändert, dass [home] durch [page1] ersetzt wird:


<!-- Seite [[page1]] -->
<template>
  <Layout :left="true" :right="true">
    <!-- Navigation -->
    <Navigation slot="left" />
    <!-- Meldung-->
    <b-alert slot="right" show variant="warning"> Page1 - value= {{ value }} </b-alert>
  </Layout>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */

import Layout from '@/components/layout'
import Navigation from '@/components/navigation'

export default {
  name: 'Page1',
  // verwendete Komponenten
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // Lebenszyklus
  beforeCreate() {
    // Client und Server
    console.log('[page1 beforeCreate]')
  },
  created() {
    // Client und Server
    this.value = this.$store.state.counter
    console.log('[page1 created], value=', this.value)
  },
  beforeMount() {
    // nur Client
    console.log('[page1 beforeMount]')
  },
  mounted() {
    // nur Client
    console.log('[page1 mounted]')
  }
}
</script>

Diese Seite dient lediglich dazu, die Navigation zwischen zwei Seiten zu ermöglichen.

6.4. Exécution

Die Datei „[nuxt.config.js]“ wird wie folgt geändert:


// Quellcode-Verzeichnis
  srcDir: 'nuxt-03',
  // Router
  router: {
    // Stammverzeichnis der Anwendung URL
    base: '/nuxt-03/'
  },
  // Server
  server: {
    // Dienstport, standardmäßig 3000
    port: 81,
    // Abgehörte Netzwerkadressen, standardmäßig localhost: 127.0.0.1
    // 0.0.0.0 = alle Netzwerkadressen des Rechners
    host: 'localhost'
}

Die bei der Ausführung angezeigte Seite sieht dann wie folgt aus:

In [5] ist zu sehen, dass die Funktion [nuxtServerInit] vom Server vor dem Lebenszyklus der Seite [index] ausgeführt wurde. [nuxt] hat gewartet, bis die asynchrone Funktion ihre Arbeit beendet hatte, bevor der Lebenszyklus fortgesetzt wurde;
In [4] ist zu sehen, dass der Client die Funktion [nuxtServerInit] nicht ausgeführt hat;

Navigieren wir nun zweimal: Index --> Seite 1 --> Index. Die Protokolle lauten dann wie folgt:

In [1-2] sieht man, dass die Funktion [nuxtServerInit] vom Client nicht ausgeführt wird;

Geben wir nun die URL „URL“ von der Seite „[page1]“ manuell ein, um einen Aufruf an den Server zu erzwingen:

In [3-4] finden wir denselben Mechanismus wieder, der dem Laden der Seite [index] beim Start vorausging. An dieser Stelle sei noch einmal daran erinnert, was bereits gesagt wurde: Wenn man den Aufruf einer Seite beim Server erzwingt, läuft alles so ab, als würde die Anwendung mit einer Startseite neu starten, bei der es sich um die angeforderte Seite handelt;