6. Exemplo [nuxt-03]: nuxtServerInit
O projeto [nuxt-03] tem como objetivo apresentar uma função do store [Vuex] chamada [nuxtServerInit]. Ela permite que o servidor inicialize o armazenamento [Vuex], da mesma forma que a função [fetch]. Mas, ao contrário da função [fetch], a função [nuxtServerInit] nunca é executada pelo cliente.
O projeto [nuxt-03] é obtido inicialmente por meio de uma cópia do projeto [nuxt-01], do qual é removida a página [page2] da pasta [pages] e do componente [navigation]. A pasta [store] é obtida por cópia da pasta [nuxt-02/store].
6.1. O store [Vuex]
A loja [Vuex] será implementada pelo seguinte arquivo [store/index.js]:
/* eslint-disable no-console */
export const state = () => ({
// contador
counter: 0
})
export const mutations = {
// incremento do contador em um valor [inc]
increment(state, inc) {
state.counter += inc
}
}
export const actions = {
async nuxtServerInit(store, context) {
// quem executa esse código?
console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
// estamos aguardando o término de uma promessa
await new Promise(function(resolve, reject) {
// normalmente, temos aqui uma função assíncrona
// simulamos isso com uma espera de um segundo
setTimeout(() => {
// sucesso
resolve()
}, 1000)
})
// modificamos o store
store.commit('increment', 34)
// registro
console.log('nuxtServerInit commit terminé')
}
}
- linhas 1-12: são análogas às do projeto [nuxt-02];
- linhas 14-32: exporta-se um objeto [actions]. Trata-se de um termo reservado do store de [Vuex];
- linha 15: define-se a função [nuxtServerInit]. Ela será executada pelo servidor ao iniciar o aplicativo. Sua função habitual é inicializar um store [Vuex] por meio de dados externos obtidos com uma função assíncrona. [nuxt] aguarda que essa função retorne seus resultados antes de iniciar o ciclo de vida da página solicitada. A função recebe dois parâmetros:
- o store [Vuex] a ser inicializado;
- o contexto [nuxt] do momento;
- linhas 19-26: aguarda-se o término da ação assíncrona, neste caso uma espera artificial de um segundo (linha 15);
- linha 28: atribui-se ao contador o valor 34;
- linhas 17 e 30: registros de log para acompanhar o andamento da execução da função [nuxtServerInit];
6.2. A página [index]
A página [index] será a seguinte:
<!-- página [index] -->
<template>
<Layout :left="true" :right="true">
<!-- navegação -->
<Navigation slot="left" />
<!-- mensagem-->
<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',
// componentes utilizados
components: {
Layout,
Navigation
},
data() {
return {
value: 0
}
},
// ciclo de vida
beforeCreate() {
// cliente e servidor
console.log('[home beforeCreate]')
},
created() {
// cliente e servidor
this.value = this.$store.state.counter
console.log('[home created], value=', this.value)
},
beforeMount() {
// somente cliente
console.log('[home beforeMount]')
},
mounted() {
// somente cliente
console.log('[home mounted]')
}
}
</script>
- linha 37: o valor do contador inicializado pela função [nuxtServerInit] é atribuído à propriedade [value] da linha 27. Esse valor é exibido pela linha 7;
- a linha 37 será executada tanto pelo servidor quanto pelo cliente. Em ambos os casos, a propriedade [value] receberá o mesmo valor, o que garante que a página gerada pelo servidor seja idêntica àquela gerada pelo cliente;
6.3. A página [page1]
A página [page1] é obtida por meio da cópia da página [index]. Em seguida, modifica-se seu texto para substituir [home] por [page1]:
<!-- página [page1]] -->
<template>
<Layout :left="true" :right="true">
<!-- navegação -->
<Navigation slot="left" />
<!-- mensagem-->
<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',
// componentes utilizados
components: {
Layout,
Navigation
},
data() {
return {
value: 0
}
},
// ciclo de vida
beforeCreate() {
// cliente e servidor
console.log('[page1 beforeCreate]')
},
created() {
// cliente e servidor
this.value = this.$store.state.counter
console.log('[page1 created], value=', this.value)
},
beforeMount() {
// somente cliente
console.log('[page1 beforeMount]')
},
mounted() {
// somente cliente
console.log('[page1 mounted]')
}
}
</script>
Esta página existe apenas para possibilitar a navegação entre duas páginas.
6.4. Exécution
O arquivo [nuxt.config.js] é alterado da seguinte forma:
// diretório do código-fonte
srcDir: 'nuxt-03',
// roteador
router: {
// raiz dos URL do aplicativo
base: '/nuxt-03/'
},
// servidor
server: {
// porta de serviço, 3000 por padrão
port: 81,
// endereços de rede monitorados, por padrão localhost: 127.0.0.1
// 0.0.0.0 = todos os endereços de rede da máquina
host: 'localhost'
}
A página exibida na execução é, então, a seguinte:
- No [5], percebe-se que a função [nuxtServerInit] foi executada pelo servidor antes do ciclo de vida da página [index]. [nuxt] aguardou que a função assíncrona concluísse seu trabalho antes de avançar para o ciclo de vida;
- em [4], percebe-se que o cliente não executou a função [nuxtServerInit];
Agora, vamos navegar duas vezes: index --> página1 --> index. Os logs ficam assim:
- no [1-2], vemos que a função [nuxtServerInit] não é executada pelo cliente;
Agora, digitemos manualmente o URL da página [page1] para forçar uma chamada ao servidor:
em [3-4], encontramos o mesmo mecanismo que precedeu o carregamento da página [index] na inicialização. Vale lembrar aqui o que já foi dito: quando se força a chamada de uma página ao servidor, tudo ocorre como se o aplicativo reiniciasse com uma página inicial que seria a página solicitada;