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')
      // شمارنده را ۱ واحد افزایش دهید
      this.$store.commit('increment', 1)
      // تغییر مقدار نمایش داده شده
      this.value = this.$store.state.counter
    }
  }
}
</script>

• خط ۱۰: یک دکمه برای افزایش شمارنده برای فروشگاه [Vuex] اضافه شده است؛
• خط ۵۴: متدی که رویداد [clic] را روی دکمه [Incrémenter] مدیریت می‌کند؛
• خط ۵۷: شمارنده پرده به اندازه ۱ افزایش می‌یابد؛
• خط ۵۹: مقدار شمارنده به ویژگی [value] اختصاص داده می‌شود تا در خط ۸ نمایش داده شود؛

پروژه [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é')
  }
}

خط ۲۸ شمارنده را روی ۵۳ تنظیم می‌کند.

بیایید درخواست 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]، ما از یک کوکی استفاده می‌کنیم تا کلاینت بتواند در صورت درخواست، اطلاعات را به سرور ارسال کند.