6. Voorbeeld [nuxt-03]: nuxtServerInit

Het project [nuxt-03] heeft tot doel een functie van de store [Vuex] te presenteren, genaamd [nuxtServerInit]. Hiermee kan de server de store [Vuex] initialiseren, net zoals de functie [fetch] dat doet. Maar in tegenstelling tot de functie [fetch] wordt de functie [nuxtServerInit] nooit door de client uitgevoerd.

Het project [nuxt-03] wordt in eerste instantie verkregen door het project [nuxt-01] te kopiëren, waaruit de pagina [page2] uit de map [pages] en uit de component [navigation]. De map [store] wordt verkregen door de map [nuxt-02/store] te kopiëren.

6.1. De store [Vuex]

De store [Vuex] wordt geïmplementeerd door het volgende bestand [store/index.js]:


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

export const mutations = {
  // de teller met één verhogen [inc]
  increment(state, inc) {
    state.counter += inc
  }
}

export const actions = {
  async nuxtServerInit(store, context) {
    // wie voert deze code uit?
    console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
    // we wachten op het einde van een belofte
    await new Promise(function(resolve, reject) {
      // normaal gesproken hebben we hier een asynchrone functie
      // we simuleren deze met een wachttijd van één seconde
      setTimeout(() => {
        // geslaagd
        resolve()
      }, 1000)
    })
    // we wijzigen de store
    store.commit('increment', 34)
    // log
    console.log('nuxtServerInit commit terminé')
  }
}

regels 1-12: zijn vergelijkbaar met wat ze waren in het project [nuxt-02];
regels 14-32: er wordt een object [actions] geëxporteerd. Dit is een gereserveerde term van de store van [Vuex];
regel 15: de functie [nuxtServerInit] wordt gedefinieerd. Deze wordt bij het opstarten van de applicatie door de server uitgevoerd. De gebruikelijke functie ervan is het initialiseren van een store [Vuex] met behulp van externe gegevens die via een asynchrone functie zijn verkregen. [nuxt] wacht tot deze functie de resultaten retourneert voordat de levenscyclus van de aangevraagde pagina wordt gestart. De functie ontvangt twee parameters:
- de te initialiseren store [Vuex];
- de huidige context [nuxt];
regels 19-26: er wordt gewacht tot de asynchrone actie is voltooid, in dit geval een kunstmatige wachttijd van één seconde (regel 15);
regel 28: de teller krijgt de waarde 34;
regels 17 en 30: logboekvermeldingen om het verloop van de uitvoering van de functie [nuxtServerInit] te volgen;

6.2. De pagina [index]

De pagina [index] ziet er als volgt uit:


<!-- pagina [index] -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigatie -->
    <Navigation slot="left" />
    <!-- bericht-->
    <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',
  // gebruikte componenten
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // levenscyclus
  beforeCreate() {
    // client en server
    console.log('[home beforeCreate]')
  },
  created() {
    // client en server
    this.value = this.$store.state.counter
    console.log('[home created], value=', this.value)
  },
  beforeMount() {
    // alleen client
    console.log('[home beforeMount]')
  },
  mounted() {
    // alleen client
    console.log('[home mounted]')
  }
}
</script>

regel 37: de waarde van de teller die door de functie [nuxtServerInit] is geïnitialiseerd, wordt toegewezen aan de eigenschap [value] van regel 27. Deze waarde wordt weergegeven door regel 7;
regel 37 wordt zowel door de server als door de client uitgevoerd. In beide gevallen krijgt de eigenschap [value] dezelfde waarde, waardoor de door de server gegenereerde pagina identiek is aan die van de client;

6.3. De pagina [page1]

De pagina [page1] wordt verkregen door de pagina [index] te kopiëren. Vervolgens wordt de tekst aangepast om [home] te vervangen door [page1]:


<!-- pagina [page1]] -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigatie -->
    <Navigation slot="left" />
    <!-- bericht-->
    <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',
  // gebruikte componenten
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // levenscyclus
  beforeCreate() {
    // client en server
    console.log('[page1 beforeCreate]')
  },
  created() {
    // client en server
    this.value = this.$store.state.counter
    console.log('[page1 created], value=', this.value)
  },
  beforeMount() {
    // alleen client
    console.log('[page1 beforeMount]')
  },
  mounted() {
    // alleen client
    console.log('[page1 mounted]')
  }
}
</script>

Deze pagina is uitsluitend bedoeld om navigatie tussen twee pagina’s mogelijk te maken.

6.4. Exécution

Het bestand [nuxt.config.js] wordt als volgt gewijzigd:


// broncodemap
  srcDir: 'nuxt-03',
  // router
  router: {
    // hoofdmap van de applicatie URL
    base: '/nuxt-03/'
  },
  // server
  server: {
    // servicepoort, standaard 3000
    port: 81,
    // netwerkadressen waarop wordt geluisterd, standaard localhost: 127.0.0.1
    // 0.0.0.0 = alle netwerkadressen van de machine
    host: 'localhost'
}

De pagina die bij uitvoering wordt weergegeven, is dan als volgt:

In [5] zien we dat de functie [nuxtServerInit] door de server is uitgevoerd vóór de levenscyclus van de pagina [index]. [nuxt] heeft gewacht tot de asynchrone functie haar werk had voltooid alvorens over te gaan naar de levenscyclus;
in [4] zien we dat de client de functie [nuxtServerInit] niet heeft uitgevoerd;

Laten we nu twee keer navigeren: index --> pagina1 --> index. De logbestanden zien er dan als volgt uit:

in [1-2] zien we dat de functie [nuxtServerInit] niet door de client wordt uitgevoerd;

Laten we nu de URL van de pagina [page1] handmatig invoeren om een aanroep naar de server te forceren:

In [3-4] zien we hetzelfde mechanisme terug als datgene dat voorafging aan het laden van de pagina [index] bij het opstarten. We herhalen hier wat al is gezegd: wanneer we het oproepen van een pagina naar de server forceren, verloopt alles alsof de applicatie opnieuw opstart met een startpagina die de opgevraagde pagina is;