iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
2

複習一下 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 符合

The Vue Instance Lifecycle

但文件卻寫著

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.

beforeCreatecreated 前後端都會執行 (SSR & CSR 都有用)

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

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

Vue.js 生命週期,可以確定做 SSR 時也會觸發 beforeCreatecreated


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 則是解方,用來管理特定執行環境的程式碼片段,並在各頁面自動載入、執行


上一篇
23. Nuxt 細說`<nuxt-child>` 和 `<nuxt>`
下一篇
25. Nuxt Plugin 如何讓 Axios 更好用 (下)
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32

尚未有邦友留言

立即登入留言