7. Приклад [nuxt-04]: підтримка сеансу клієнт/сервер

Проєкт [nuxt-04] присвячений проблемі збереження сеансу клієнт/сервер. Ми повертаємося до проєкту [nuxt-03] із такими змінами:

сторінка [index] матиме кнопку, яка дозволить збільшувати лічильник масиву [Vuex];
сторінка [page1] залишається без змін;
бажано, щоб при ручному запиті сторінки до сервера останній повертав запитувану сторінку зі сховищем [Vuex], лічильник якого мав би останнє значення, яке він мав на стороні клієнта;

Проєкт [nuxt-04] спочатку створюється шляхом копіювання проєкту [nuxt-03]:

Змінюється лише сторінка [index]:


<!-- сторінка [index] -->
<template>
  <Layout :left="true" :right="true">
    <!-- навігація -->
    <Navigation slot="left" />
    <!-- повідомлення-->
    <template slot="right">
      <b-alert show variant="warning"> Home - value= {{ value }} </b-alert>
      <!-- кнопка -->
      <b-button @click="incrementCounter" class="ml-3" variant="primary">Incrémenter</b-button>
    </template>
  </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',
  // використані компоненти
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // життєвий цикл
  beforeCreate() {
    // клієнт і сервер
    console.log('[home beforeCreate]')
  },
  created() {
    // клієнт і сервер
    this.value = this.$store.state.counter
    console.log('[home created], value=', this.value)
  },
  beforeMount() {
    // тільки клієнт
    console.log('[home beforeMount]')
  },
  mounted() {
    // тільки клієнт
    console.log('[home mounted]')
  },
  // управління подіями
  methods: {
    incrementCounter() {
      console.log('incrementCounter')
      // збільшення лічильника на 1
      this.$store.commit('increment', 1)
      // зміна відображуваного значення
      this.value = this.$store.state.counter
    }
  }
}
</script>

рядок 10: додано кнопку для збільшення лічильника магазину [Vuex];
рядок 54: метод, що керує [clic], при натисканні кнопки [Incrémenter];
рядок 57: лічильник штори збільшується на 1;
рядок 59: значення лічильника присвоюється властивості [value], щоб воно відображалося у рядку 8;

Виконуємо проект [nuxt-04] із таким файлом [nuxt.config.js]:


// каталог вихідного коду
  srcDir: 'nuxt-04',
  // маршрутизатор
  router: {
    // кореневий каталог URL додатка
    base: '/nuxt-04/'
  },
  // сервер
  server: {
    // порт служби, за замовчуванням 3000
    port: 81,
    // мережеві адреси, на яких відбувається прослуховування, за замовчуванням localhost: 127.0.0.1
    // 0.0.0.0 = усі мережеві адреси комп’ютера
    host: 'localhost'
}

Під час виконання першою відображеною сторінкою є така:

Кілька разів натиснувши кнопку [3], отримуємо таку нову сторінку:

Якщо скористатися посиланням [3], з’являється така сторінка:

за посиланням [2], сторінка [page1] [1] правильно відображає значення лічильника;

Тепер оновимо сторінку за допомогою [3]. Нова сторінка виглядає так:

на сторінці [2] поточне значення лічильника зникло. Воно повернулося до початкового значення;

Цей результат цілком зрозумілий, якщо подивитися на логи:

у [1] сервер повторно виконав функцію [nuxtServerInit]. А ось її код:

/* eslint-disable no-console */
export const state = () => ({
   // лічильник
  counter: 0
})

export const mutations = {
   // збільшення лічильника на одиницю [inc]
  increment(state, inc) {
    state.counter += inc
  }
}

export const actions = {
  async nuxtServerInit(store, context) {
     // хто виконує цей код?
    console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
     // очікуємо завершення обіцянки
    await new Promise(function(resolve, reject) {
       // зазвичай тут використовується асинхронна функція
       // її імітують за допомогою очікування протягом однієї секунди
      setTimeout(() => {
         // успіх
        resolve()
      }, 1000)
    })
     // змінюємо значення в змінній
    store.commit('increment', 53)
     // журнал
    console.log('nuxtServerInit commit terminé')
  }
}

У рядку 28 лічильнику присвоюється значення 53.

Розглянемо запит HTTP, зроблений браузером після оновлення сторінки [page1]:

Бачимо, що окрім сторінок [page1] та [1] клієнт запитує у сервера певну кількість скриптів. Звернемо увагу на скрипти [pages_index, pages_page1], які пов’язані зі сторінками [index, page]. Ці скрипти надсилаються серверу з кожним запитом, незалежно від того, яку саме сторінку запитують;

У [1] сторінка [page1] запитується у сервера за допомогою наступного запиту HTTP:

GET http://localhost:81/nuxt-04/page1
Host: localhost:81
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
DNT: 1
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Pragma: no-cache
Cache-Control: no-cache

Бачимо, що цей запит не передає серверу жодної інформації. Отже, сервер не має можливості дізнатися про стан магазину [Vuex] на стороні клієнта. Для цього клієнт мав би надіслати йому цю інформацію.

У наступному проєкті [nuxt-05] ми використовуємо файл cookie, щоб клієнт міг надсилати інформацію на сервер, коли до нього надходить запит.