這篇主題講「Nuxt 如何用 asyncData 動態產生頁面內容」

用來補充頁面細部設定

asyncData 在執行順序中，排在頁面渲染(render)前，回傳值會被塞回 data

export default {
    /* 你可以把 data 當成預設值 */
    data() {
        return { result: '未查詢' };
    },
    
    asyncData() {
        return { result: '報名結果是 ooxx' };
    }
}

所有頁面渲染需要的資料，不管透過 API、靜態值，都透過 asyncData 回傳值指定。

你可以印出 data，最終是哪個值？

<template>
    {{ result }} <!-- 印出「報名結果是 ooxx」 -->
</template>

示範 - 查詢 theF2E 挑戰賽報名結果

原理與使用方式說完，來個示範
做一頁 /search-signup-result

pages/search-signup-result.vue

<template>
    <div>
		<h1>六角報名查詢</h1>
        
        {{ result }}
    </div>
</template>

<script>
import axios from 'axios';

export default {

	/* 查詢 hexsholl@test.com 有無報名 theF2E 挑戰賽 */

	async asyncData() {

		let { data } = await axios.post('https://www.thef2e.com/api/isSignUp', {

            "email": "hexscholl@test.com"

        });
        

		return { result: data }

	}

}
</script>

我偏好 ES7 async/await 寫法
也可用 Promise 寫法，如下:

/* ... */
	/* 查詢 hexsholl@test.com 有無報名 theF2E 挑戰賽 */
    
    asyncData() {
        return axios.post('https://www.thef2e.com/api/isSignUp', {
            "email": "hexscholl@test.com"
        }).then(({ data }) => ({
            result: data
        }))
    }
/* ... */

另外

預覽結果

這可以針對不同商品id，產生對應頁面
讀者手癢可自行實作商品頁看看
讓商品頁根據 id 呈現對應內容

• /product/1
• /product/2