後台的 asyncData

Vue.js 3.0 筆記

14-2 後台的 asyncData

asyncData 是在 Server 端處理非同步的生命週期（所以前端的各種函數或物件都不能用，例如：$this、alert()），只會執行一次，通常用來擷取API結果，其內容會覆蓋 data 中的東西
```
asyncData() {
  const name = 'Tad';
  return {name};
},
```
data 的值會被 asyncData 覆蓋，所以除非有要再次修改 asyncData 中的變數，否則一般不會在 data 中去設一個一樣名稱的變數
```
data() {
  return {
    name = '';
  };
},
methods{
  handName() {
    this.name = 'Kai';
  }
}
```
asyncData 只有在 page 中能用，其餘目錄沒有這個生命週期

搭配 async、await 使用：

<script>
import axios from "axios";
export default {
  async asyncData() {
    const res = await axios.get("http://blog.lces.tn.edu.tw/api.php");
    return { res: res.data.data };
  }
};
</script>

14-1 nuxt 生命週期