6. [nuxt-03] Örneği: nuxtServerInit

[nuxt-03] projesi, [Vuex] mağazasının [nuxtServerInit] adlı bir işlevini tanıtmayı amaçlamaktadır. Bu işlev, sunucunun [Vuex] depolama alanını, [fetch] işlevinin yaptığı gibi başlatmasına olanak tanır. Ancak [fetch] işlevinden farklı olarak, [nuxtServerInit] işlevi istemci tarafından hiçbir zaman yürütülmez.

[nuxt-03] projesi, başlangıçta [nuxt-01] projesinin kopyalanmasıyla elde edilir; bu projeden, [pages] klasöründeki ve [navigation] bileşeninden kaldırılmıştır. [store] klasörü, [nuxt-02/store] klasörünün kopyalanmasıyla oluşturulmuştur.

6.1. [Vuex] mağaza

[Vuex] depolama alanı, aşağıdaki [store/index.js] dosyası ile uygulanacaktır:

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

export const mutations = {
  // sayaç bir birim artırılıyor [inc]
  increment(state, inc) {
    state.counter += inc
  }
}

export const actions = {
  async nuxtServerInit(store, context) {
    // bu kodu kim çalıştırıyor?
    console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
    // bir sözün tamamlanmasını bekliyoruz
    await new Promise(function(resolve, reject) {
      // burada normalde asenkron bir işlev bulunur
      // bir saniye bekleyerek simüle ediyoruz
      setTimeout(() => {
        // başarılı
        resolve()
      }, 1000)
    })
    // depolama alanı değiştiriliyor
    store.commit('increment', 34)
    // günlük
    console.log('nuxtServerInit commit terminé')
  }
}

• 1-12. satırlar: [nuxt-02] projesindekine benzerdir;
• 14-32. satırlar: [actions] nesnesi dışa aktarılır. Bu, [Vuex] mağazasının ayrılmış bir terimidir;
• 15. satır: [nuxtServerInit] işlevi tanımlanmaktadır. Bu işlev, uygulamanın başlatılması sırasında sunucu tarafından yürütülecektir. Bu fonksiyonun genel işlevi, asenkron bir fonksiyonla elde edilen harici veriler yardımıyla [Vuex] depolama alanını başlatmaktır. [nuxt], istenen sayfanın yaşam döngüsünü başlatmadan önce bu fonksiyonun sonuçlarını vermesini bekler. Fonksiyon iki parametre alır:
  • başlatılacak [Vuex] deposu;
  • o anki [nuxt] bağlamı;
• 19-26. satırlar: asenkron işlemin bitmesi beklenir; burada bir saniyelik yapay bir bekleme vardır (15. satır);
• 28. satır: sayaça 34 değeri verilir;
• 17. ve 30. satırlar: [nuxtServerInit] işlevinin yürütülüşünü takip etmek için günlük kayıtları;

6.2. [index] sayfası

[index] sayfası şu şekilde olacaktır:

<!-- [index] sayfası -->
<template>
  <Layout :left="true" :right="true">
    <!-- gezinme -->
    <Navigation slot="left" />
    <!-- mesaj-->
    <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',
  // kullanılan bileşenler
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // yaşam döngüsü
  beforeCreate() {
    // istemci ve sunucu
    console.log('[home beforeCreate]')
  },
  created() {
    // istemci ve sunucu
    this.value = this.$store.state.counter
    console.log('[home created], value=', this.value)
  },
  beforeMount() {
    // sadece istemci
    console.log('[home beforeMount]')
  },
  mounted() {
    // sadece istemci
    console.log('[home mounted]')
  }
}
</script>

• 37. satır: [nuxtServerInit] fonksiyonu tarafından başlatılan sayaç değeri, 27. satırdaki [value] özelliğine atanır. Bu değer 7. satırda görüntülenir;
• 37. satır hem sunucu hem de istemci tarafından yürütülecektir. Her iki durumda da [value] özelliği aynı değeri alacaktır; bu da sunucu tarafından oluşturulan sayfanın, istemci tarafından oluşturulan sayfayla aynı olmasını sağlar;

6.3. [page1] sayfası

[page1] sayfası, [index] sayfasının kopyalanmasıyla elde edilir. Ardından, metni değiştirerek [home] ifadesini [page1] ile değiştiririz:

<!-- [[page1] sayfası] -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigasyon -->
    <Navigation slot="left" />
    <!-- mesaj-->
    <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',
  // kullanılan bileşenler
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // yaşam döngüsü
  beforeCreate() {
    // istemci ve sunucu
    console.log('[page1 beforeCreate]')
  },
  created() {
    // istemci ve sunucu
    this.value = this.$store.state.counter
    console.log('[page1 created], value=', this.value)
  },
  beforeMount() {
    // sadece istemci
    console.log('[page1 beforeMount]')
  },
  mounted() {
    // sadece istemci
    console.log('[page1 mounted]')
  }
}
</script>

Bu sayfa, yalnızca iki sayfa arasında gezinmeyi mümkün kılmak amacıyla bulunmaktadır.

6.4. Exécution

[nuxt.config.js] dosyası şu şekilde değiştirilir:

// kaynak kod dizini
  srcDir: 'nuxt-03',
  // yönlendirici
  router: {
    // uygulamanın URL kökü
    base: '/nuxt-03/'
  },
  // sunucu
  server: {
    // hizmet bağlantı noktası, varsayılan olarak 3000
    port: 81,
    // dinlenen ağ adresleri, varsayılan olarak localhost: 127.0.0.1
    // 0.0.0.0 = makinenin tüm ağ adresleri
    host: 'localhost'
}

Çalıştırıldığında görüntülenen sayfa şöyledir:

• [5] dosyasında, [nuxtServerInit] işlevinin, [index] sayfasının yaşam döngüsünden önce sunucu tarafından yürütüldüğü görülmektedir. [nuxt], yaşam döngüsüne geçmeden önce asenkron işlevin işini tamamlamasını beklemiştir;
• [4]'te, istemcinin [nuxtServerInit] işlevini çalıştırmadığı görülmektedir;

Şimdi iki kez gezinelim: index --> sayfa1 --> index. Günlük kayıtları şu şekildedir:

• [1-2]'te, [nuxtServerInit] işlevinin istemci tarafından çalıştırılmadığını görüyoruz;

Şimdi, sunucuya bir çağrı yapılmasını zorlamak için [page1] sayfasındaki URL kodunu elle girelim:

[3-4]'te, başlangıçta [index] sayfasının yüklenmesinden önce görülen mekanizmanın aynısını görüyoruz. Burada daha önce söylenenleri hatırlatmak isteriz: sunucuya bir sayfanın çağrılmasını zorladığımızda, her şey sanki uygulama istenen sayfa bir ana sayfa olarak yeniden başlatılıyormuş gibi gerçekleşir;