說下Nuxt中頁面特有的兩個重要方法和axios的使用

-1- Nuxt 中的頁面特指在 pages 文件夾中的 vue 組件。

-2- Nuxt 中的頁面保留了 Vue 組件中的生命周期函數(shù)焚鹊，在此基礎上又提供了兩個比較重要的函數(shù)，可以把它們理解為”新增的生命周期函數(shù)“韧献，類似而又不同末患，感覺某種意義上可以替代 Vue 原有的生命周期函數(shù)了。

-3- asyncData()

-3-1- 一個既可以運行在服務端也可以運行在客戶端的方法锤窑，我們可以通過 process.server / process.client / process.static 來確定或指定代碼在什么環(huán)境下執(zhí)行璧针。

-3-2- 在頁面組件每次加載前調(diào)用，可以在服務端或路由更新之前被調(diào)用

-3-3- asyncData的第一個參數(shù)是當前頁面的上下文對象渊啰，具體可以參考文檔【https://zh.nuxtjs.org/api/context】

-3-4- 可以用 asyncData方法來獲取數(shù)據(jù)并返回給當前組件（設置組件的數(shù)據(jù)）探橱，具體操作就是得到值后，設置得到的值到 Vue 組件的 data 中绘证，這樣頁面就可以直接使用了隧膏，例如

export default {
data () {
return { num: 0 } // 默認值
},
asyncData (context) {
// TODO
return { num: 10 } // 方法執(zhí)行后，經(jīng)過各種計算后的值嚷那，直接 return 即可
}
}
-3-5- asyncData方法是在組件初始化前被調(diào)用的胞枕，不能通過 this 來訪問組件的實例對象

-4- fetch() 方法

-4-1- 用于在渲染頁面前填充應用的狀態(tài)樹（store）數(shù)據(jù)，與 asyncData 方法類似魏宽，不同的是它不會設置組件的數(shù)據(jù)

-4-2- 在組件每次加載前被調(diào)用（在服務端或切換至目標路由之前）

-4-3- 第一個參數(shù)是頁面組件的上下文對象 context腐泻，我們可以用 fetch 方法來獲取數(shù)據(jù)填充應用的狀態(tài)樹

<template>
<h1>Num: {{ $store.state.num }}</h1>
</template>

-4-5- 如果要在fetch中調(diào)用并操作store队询，請使用store.dispatch

是不是有點暈派桩，總結一下這兩個方法吧：它們都可以運行在前后臺；它們都可以發(fā)起請求蚌斩，但是都不會在瀏覽器的工具欄中看到請求（因為請求不是瀏覽器發(fā)的）窄坦；它們都有自己的方式安排請求到的值（設置到data和設置到vuex）；其它的你再讀讀文檔凳寺，爭取多理解

-5- axios 的使用

-5-1- Nuxt 文檔中說了鸭津，推薦用他們自己封裝過的 axios 模塊；如果要用 axios 官方的模塊肠缨，一定要對 axios 進行封裝逆趋，創(chuàng)建出 axios 實例，設置上攔截器什么的（大家都應該這么用的吧）晒奕；就用 Nuxt 封裝過的吧

-5-2- vue 頁面組件中使用 axios闻书，mounted() / created() / methods

const data = await this. $axios.$ get('http://localhost:3000/user/list')
-5-3- asyncData() / fetch() 中

async asyncData({ $axios }) { let r = await$ axios. $get("http://localhost:3000/api/user/list"); }, async fetch({ store,$ axios }) {
let r = await $axios.$ get("http://localhost:3000/api/user/list");
}
-5-4- vuex 的 actions 中

let r = await this. $axios.$ get("http://localhost:3000/api/user/list");
-5-5- 抽取單獨數(shù)據(jù)層的方式（api）名斟，我試了直接在 api 的模塊中直接導入 '@nuxtjs/axios' 好像有點問題，如果大家有實驗成功魄眉，麻煩下面留言下砰盐，多謝

// api 下的 user 模塊中
export const getList = ( $axios) =>$ axios.$get("http://localhost:3000/api/user/list")

// vuex 的 user 模塊的 actions 中
import { getList } from '@/api/user'
// ...
let r = await getList(this.$axios)
更多細節(jié)，大家去看文檔吧

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者