目錄

• 目錄
  • context是甚麼
  • universal key
  • server side key
  • client side key
  • 參考資料

context是甚麼

(圖片取自Nuxt官網)

Nuxt context是一些特定函式(ex: asyncData、plugins、middleware、nuxtServerInit)接收的參數，但它不是Vuex action的context

每個函式的context內容不太一樣、因為hook有分在客戶端執行、伺服器端執行的，所以有些屬性(key)只能在某一端上取用

有context的函式(ex: nuxtServerInit、middleware、validate、asyncData)，無法用this存取Vue實例的資料

universal key

不管客戶端或伺服器都可以取用

• app
  Vue實例的options(ex: store、router)、plugin(ex: $axios)

• store
  有啟用Vuex才能用
  Vuex的store實例，裡面有getters、state、mutation、actions

• route
  Vue Router的route實例，裡面有fullPath、params、query...

• params & query
  route.params & route.query，常配合asyncData、fetch使用

    <script lang="ts">
      import Vue from 'vue';
  
      export default Vue.extend({
        name: 'UserDetail',
        validate({params}) { 
          return !(/^[0-9]+$/.test(params.UserDetail));
        },
      });
    </script>
  

• env
  設定在nuxt.config.js的環境變數
  功能和Vue專案的process.env一樣

  // nuxt.config.js
  
  export default {
    env: {
      baseUrl: process.env.BASE_URL || 'http://localhost:3000'
    }
  }
  

• redirect
  使用redirect可以將使用者導到其他頁面

• error
  使用error會顯示錯誤頁面，常用於asyncData內的catch block

  傳給這個方法的參數是個物件，裡面必須有statusCode、message屬性

  <script lang="ts">
    import Vue from 'vue';
  
    export default Vue.extend({
      name: 'UserDetail',
      async asyncData({params, app, error}) {
          const id = params.UserDetail;
  
          try {
            // 如果使用axios.get的話會遇到Maximum call stack size exceeded，加上$即可
            const post = await app.$axios.$get(`https://api.nuxtjs.dev/posts/${id}`);
  
            return {post};
  
          } catch (e:any) {
            error(e);
          }
      },    
      data() {
        return {
        };
      },
    });
  </script>
  

• $ config
  Nuxt 2.13.x新增
  透過$ config可以取得runtime config

server side key

伺服器(ex: asyncData、nuxtServerInit)可以取用

• req & res
  由Node.js伺服器發出request和response
  如果Nuxt被當作middleware的話，req、res物件內容會根據使用的框架而不同
  靜態生成(nuxt generate)無法使用

  // server-middleware/logger.js
  
  const express = require('express');
  const app = express();
  
  app.get('/', function(req, res){
    res.send('Hello Nuxt');
  })
  
  module.exports = app;
  

• beforeNuxtRender

client side key

• from
  route從哪導來的

• nuxtState
  常用於在客戶端進行hydration前，使用beforeNuxtRender取得nuxtState
  只有universal模式才可用

參考資料

Nuxt - The Context
Nuxt - Context and helpers
Working with context, helpers, and advanced properties in Nuxt.js

Nuxt - The env property
Nuxt - RuntimeConfig

Nuxt js Maximum call stack size exceeded