# Nuxt 生命週期 middleware、asyncData、fetch

Nuxt是能夠解決vue SPA與SEO問題的框架
在v2.12時有個重大生命週期更新
目前筆者習慣用的是2.15的版本~

## 生命週期流程圖
nuxt的生命週期可以參考下圖

## middleware
middleware直譯大概是中間件
可以想像為在請求和回應之間的中盤商
實際運用可在每頁切換需呼叫同一功能時使用

資料夾結構:
放置在`middleware`底下

#### 全域設定
首先在nuxt.config.js可以設定middleware
那在每一頁切換router時
就會呼叫對應的middleware

// nuxt.config.js
router:{
    middleware: ['名稱'] // array可放置多個 單數亦可用string
}

#### 單一頁面呼叫
在pages的頁面也能獨立使用

<script>
export default {
    middleware: '名稱'
}    
</script>

## asyncData

在nuxt的生命週期中
若需要在資料初始化之前先執行邏輯
可以透過`asyncData`的鉤子實現

:::warning
需特別注意
1. asyncData是在created之前，還未初始化完成，所以是無法使用`this`的！
2. 只能用在pages底下的component。
3. asyncData有context參數可以使用。
:::

**Promise**的寫法

<script>
import axios from 'axios'
export default {
    asyncData(context) {
        return axios.get('http://localhost:8112/api/frontend')
          .then((resp) => {
            return { title: resp.data.data }
        })
    }
}    
</script>

**async / await**
加上彈性寫baseURL的寫法

<script>
import axios from 'axios'
export default {
    asyncData(context) {
        const res = await axios.get(context.$axios.defaults.baseURL + '/router-name')
        return { configs: res.data.data }
    }
}    
</script>

## fetch

:::info
version >= v2.12的生命週期中fetch的生成在created之後
所以是**可以**調用`this`的！
全部組件都可以使用fetch，包含layout。
:::

fetch因可調用this，也就是說可以直接更改组件的 data
因此不一定得將資料儲存在Vuex裡，等於在Vuex之外多一個儲存資料的選項。

*個人認為這篇解釋得很清楚: https://juejin.cn/post/6844904168151334919*

#### 新舊差異
舊fetch需要傳遞context參數 -- `fetch(context)`
而新fetch增加了this進去，不用傳參就能輕易修改data！

這邊使用async / await的寫法

<script>
export default {
    data() {
        return {
            dataConfigs: []
        }        
    },
    async fetch() {
        const configs = await this.$utility.getConfigs()
        this.dataConfigs = configs
    }
}    
</script>