介绍
nuxt.js是基于Vue的应用框架，它预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。它提供了一个asyncData方法可用于在服务端里异步的获取数据，它可以在页面组件每次加载前被调用。
使用
这里使用的是typescript的方式，asyncData方法获取到数据后会填充到data中，且asyncData方法在vue组件实例化之前被调用，因此无法获取到实例this。
方式一：使用axios
import axios from 'axios'import { Component, Vue, } from "nuxt-property-decorator";@Component({asyncData(context: any): Promise <any> {return axios.get('http://test-api/get/data').then(res => {return {title: res.data.title, list: res.data.list}})},})export default class Index extends Vue {}
方式二：使用async\await
import axios from 'axios'import { Component, Vue, } from "nuxt-property-decorator";@Component({async asyncData(context: any): Promise <any> {let {data} = await axios.get('http://test-api/get/data');return {title: data.title, list: data.list}},})export default class Index extends Vue {}
上面就是asyncData部分的使用方式，当页面第一次加载时会在服务端请求数据并填充到页面的data中。
获取Cookie
因为asyncData是会在服务端调用的，因此它无法和浏览器一样去获取Cookie，但是asyncData中的第一个参数是一个上下文对象，它在服务端调用时，我们可以访问用户请求的req和res对象，因此我们也可以通过它来获取我们对应的Cookie信息。
import axios from 'axios'import { Component, Vue, } from "nuxt-property-decorator";@Component({async asyncData(context: any): Promise <any> {let params = {name: 'tom',age: 20,token: '',};// 可以使用process.server检查是否在服务器端 if (process.server) {if (context.req && context.req.headers !== undefined) {// 获取Cookies信息let cookieArr = context.req.headers.cookie;if (!params.token) {params.token = getCookie('token', cookieArr)}}}let {data} = await axios.post('http://test-api/post/data', params);return {title: data.title, list: data.list}},})export default class Index extends Vue {}//获取对应cookie方法function getCookie (name: string, strCookie: any) {let arrCookie = strCookie.split(';');let cookie = arrCookie.find(item => item.split('=')[0] === name);return cookie ? cookie.split('=')[1] : '';}
结语
使用asyncData方法时需要注意上下文对象的一些参数是否可用，因为它同时应用在两个端，所以需要对一些参数进行判断之后在使用。
