前端框架御三家之一的 Vue，在 2020 年第四季迎來的第三代版本，代號為 One Piece。雖說已略為上手 2.0 版，決定藉由 HiSKIO 2020 Vue3 專業職人 的課程，來加速自己的熟悉程度。這篇會筆記下 Nuxt 關於 fetch 的細節。
課程相關資訊
[連結]：https://hiskio.com/courses/419/lectures/20814
本篇範圍：Chapter 3 ( 開始使用 Nuxt 吧 ) ，一共有 10 篇
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。
筆記
1. Server 端的 asyncData 僅能在 page 頁面執行一次，你也可以設定 fetchOnServer: false 來讓所有的 fetch 僅在客戶端執行
2. $fetchState.pending：在 client 端判斷 API 是否載入完成
3. $fetchState.error：當畫面上發生錯誤，讓你可以去判斷錯誤內容
4. $fetchState.timestamp：顯示最後一次非同步處理的時間
5. 以上三點，可以搭配 v-if 做使用，讓畫面得以根據 API 回傳情況改變
6. 可以用 keep-alive 執行緩存，並用 activated 函式，可以與 fetchState.timestamp 搭配，來讓 api 得以在緩存一段時間後重新執行
7. beforeCreate & created 會在 server 和 client 端都執行一次
