6. مثال [nuxt-03]: nuxtServerInit

پروژه [nuxt-03] با هدف نمایش تابع [nuxtServerInit] از مخزن [Vuex] ایجاد شده است. این امکان را برای سرور فراهم می‌کند تا مخزن [Vuex] را به همان شیوه‌ای که تابع [fetch] این کار را انجام می‌دهد، راه‌اندازی کند. با این حال، برخلاف تابع [fetch]، تابع [nuxtServerInit] هرگز توسط کلاینت اجرا نمی‌شود.

پروژه [nuxt-03] در ابتدا با کپی کردن پروژه [nuxt-01] ایجاد می‌شود، که از آن صفحه [page2] از پوشه [pages] و از کامپوننت QZXW2HTMLP0007 حذف می‌شود.47ZQX. پوشه [store] با کپی کردن پوشه [nuxt-02/store] ایجاد شده است.

6.1. ذخیره‌گاه [Vuex]

فایل [Vuex] توسط فایل زیر [store/index.js] پیاده‌سازی خواهد شد:

/* 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', 34)
    // لاگ
    console.log('nuxtServerInit commit terminé')
  }
}

• خطوط ۱–۱۲: همانند آنچه در پروژه [nuxt-02] بودند؛
• خطوط 14–32: یک شیء به نام [actions] صادر می‌شود. این یک اصطلاح رزرو شده از فروشگاه [Vuex] است؛
• خط ۱۵: تابع [nuxtServerInit] تعریف شده است. این تابع هنگام شروع برنامه توسط سرور اجرا خواهد شد. نقش معمول آن، راه‌اندازی یک مخزن به نام [Vuex] با استفاده از داده‌های خارجی که از طریق یک تابع غیرهمزمان به دست آمده است. [nuxt] منتظر می‌ماند تا این تابع نتایج خود را بازگرداند، پیش از آنکه چرخهٔ عمر صفحهٔ درخواستی را آغاز کند. این تابع دو پارامتر می‌گیرد:
  • ذخیره‌ی [Vuex] که باید مقداردهی اولیه شود؛
  • زمینهٔ جاری [nuxt]؛
• خطوط ۱۹–۲۶: منتظر تکمیل عملیات ناهمزمان می‌مانیم؛ در اینجا، یک وقفه مصنوعی یک ثانیه‌ای (خط ۱۵)؛
• خط ۲۸: شمارنده روی ۳۴ تنظیم می‌شود؛
• خطوط ۱۷ و ۳۰: لاگ‌ها برای ردیابی اجرای تابع [nuxtServerInit]؛

6.2. صفحه [index]

صفحه [index] به شرح زیر خواهد بود:

<!--صفحه [index] -->
<template>
  <Layout :left="true" :right="true">
    <!-- ناوبری -->
    <Navigation slot="left" />
    <!-- پیام-->
    <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',
  // کامپوننت‌های استفاده شده
  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]')
  }
}
</script>

• خط ۳۷: مقدار شمارنده که توسط تابع [nuxtServerInit] مقداردهی اولیه شده است، در خط ۲۷ به ویژگی [value] اختصاص داده می‌شود. این مقدار توسط خط ۷ نمایش داده می‌شود؛
• خط ۳۷ هم توسط سرور و هم توسط کلاینت اجرا خواهد شد. در هر دو مورد، مقدار یکسانی برای ویژگی [value] تعیین می‌شود که تضمین می‌کند صفحه تولید شده توسط سرور با صفحه‌ای که توسط کلاینت تولید شده یکسان باشد؛

6.3. صفحه [page1]

صفحه [page1] با کپی کردن صفحه [index] به دست می‌آید. سپس متن آن اصلاح می‌شود تا [home] با [page1] جایگزین شود:

<!--صفحه [[page1]] -->
<template>
  <Layout :left="true" :right="true">
    <!-- ناوبری -->
    <Navigation slot="left" />
    <!-- پیام-->
    <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',
  // کامپوننت‌های استفاده شده
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  //چرخهٔ زندگی
  beforeCreate() {
    // کلاینت و سرور
    console.log('[page1 beforeCreate]')
  },
  created() {
    // کلاینت و سرور
    this.value = this.$store.state.counter
    console.log('[page1 created], value=', this.value)
  },
  beforeMount() {
    //فقط کلاینت
    console.log('[page1 beforeMount]')
  },
  mounted() {
    //فقط کلاینت
    console.log('[page1 mounted]')
  }
}
</script>

این صفحه صرفاً برای امکان پیمایش بین دو صفحه ایجاد شده است.

6.4. Exécution

فایل [nuxt.config.js] به شرح زیر اصلاح می‌شود:

// پوشه کد منبع
  srcDir: 'nuxt-03',
  // روتر
  router: {
    // دایرکتوری ریشهٔ برنامه
    base: '/nuxt-03/'
  },
  // سرور
  server: {
    // پورت سرویس، به‌طور پیش‌فرض 3000
    port: 81,
    // آدرس‌های شبکه‌ای که گوش داده می‌شوند، پیش‌فرض localhost: 127.0.0.1
    // 0.0.0.0 = تمام آدرس‌های شبکه روی دستگاه
    host: 'localhost'
}

صفحه نمایش‌داده‌شده در زمان اجرا به شرح زیر است:

• در [5]، می‌بینیم که تابع [nuxtServerInit] توسط سرور قبل از چرخه عمر صفحه [index] اجرا شده است. [nuxt] منتظر اتمام تابع غیرهمزمان بود قبل از اینکه به چرخهٔ عمر ادامه دهد؛
• در [4]، می‌بینیم که کلاینت تابع [nuxtServerInit] را اجرا نکرده است؛

حال بیایید دو بار پیمایش کنیم: index --> page1 --> index. لاگ‌ها به شرح زیر است:

• در [1-2]، می‌بینیم که تابع [nuxtServerInit] توسط کلاینت اجرا نمی‌شود؛

اکنون بیایید به‌صورت دستی از صفحه [page1] وارد URL شویم تا تماس با سرور را اجباری کنیم:

در [3-4]، ما همان مکانیزمی را می‌بینیم که پیش از بارگذاری صفحه [index] در هنگام راه‌اندازی وجود داشت. برای خلاصه آنچه قبلاً گفته شده است: هنگامی که فراخوانی یک صفحه به سرور اجباری می‌شود، گویی برنامه با یک صفحه اصلی که همان صفحه درخواست‌شده است، مجدداً راه‌اندازی می‌شود؛