Nuxt(4) - context


Posted by TempuraEngineer on 2022-10-09

目錄


context是甚麼

Nuxt 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


#Nuxt #context







Related Posts

環境變數 Environment Variable

環境變數 Environment Variable

第一章:3 快速回測交易訊號

第一章:3 快速回測交易訊號

Template Literals 與 Destructuring

Template Literals 與 Destructuring


Comments