複習一下 asyncData 動態產生頁面，作業得透過 axios 拉 product api，藉此產生商品頁面的情境

安裝 Axios

$ yarn add axios

商品頁

<template>
  <h1>{{ title }}</h1>
  <img :src="photo"/>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://api.example.com/products/${params.id}`)
    return { 
      title: data.title,
      photo: data.photo,
      desc: data.description
    }
  }
}
</script>

SSR 區塊預先渲染一部分頁面，而有一部分頁面會在使用者操作後變化，像是 直接結帳、加入購物車

若是頁面需要登入或驗證資訊，像是

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'YUOR_AUTH_TOKEN';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

得確保 axios 設定值正確，以免不正常登出造成流程中斷

得在前後端生命週期都會執行的 Hook 做 axios 初始化

從 Nuxt 請求處理流程 和 Vue.js 生命週期 兩張圖可得知:

1. asyncData / fetch 在後端執行
2. beforeCreated / created 在前端執行

似乎沒有一個 Hook 符合

但文件卻寫著

It is important to know that in any Vue instance lifecycle, only beforeCreate and created hooks are called both, from client-side and server-side. All other hooks are called only from the client-side.

beforeCreate 和 created 前後端都會執行 (SSR & CSR 都有用)

追原始碼確定原因， Nuxt 前後端都會建 Vue Instance，但不帶 el 掛載點

const app = {
  router,
  <% if (store) { %>store,<%  } %>
  nuxt: { /*.. */ },
  ...App
}

按 Vue.js 生命週期，可以確定做 SSR 時也會觸發 beforeCreate、created

Axios 初始設定

產品頁面加上 axios 初始設定後

<script>
import axios from 'axios'

export default {
  created() {
    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.headers.common['Authorization'] = 'YUOR_AUTH_TOKEN';
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  },
  
  async asyncData ({ params }) {
    let { data } = await axios.get(`/products/${params.id}`)
    return { 
      title: data.title,
      photo: data.photo,
      desc: data.description
    }
  }
}
</script>

若是有多頁，重複貼 code 很煩，違反 DRY 原則，未來維護保證隊友糙你

Nuxt Plugin 則是解方，用來管理特定執行環境的程式碼片段，並在各頁面自動載入、執行