asyncdata 获取参数_载入页面初始数据（asyncData）《 Nuxt.js：异步数据 》

载入页面组件之前，会调用 asyncData 这个方法，你可以在这个方法里请求页面的初始数据。比如在 posts/index.vue 这个组件里面 ..

先添加一组 script .. 在默认导出的东西里面添加一个 asyncData 方法 .. 可以把它标记成一个 async 方法，因为方法里面会包含一些异步的动作，比如去请求应用的后端接口 ..

然后把 $axios 从方法的参数里面拿出来用一下 .. 它是一个 http 客户端，可以发出各种类型的 http 请求 .

下面定义一个 posts .. 执行一下 $axios.$get .. 发出一个 get 类型的 http 请求 ... 地址是 http://localhost:3333/posts .. 这个接口是之前我们创建的一个假的 RESTful 接口 ..

方法 return 一个对象 .. 里面是 posts ... 这个方法 return 的数据会跟组件的数据全并到一块儿.. 也就是你可以在组件的视图里面使用这些数据 ..

在标题的下面，添加一组 div ... 循环一下 posts 里的数据 .. 当前项目叫 post ..

再绑定一个 key .. 用一下 post 里的 id 属性的值 ..

然后在这个 div 里面，绑定输出 post 里的 title 属性的值 ..

回到浏览器 .. 访问一下 posts 这个地址 ..

页面上没有显示内容列表 .. 打开开发者工具 .. Vue 选项卡 .. 找到页面组件 .. 你会发现这里有一个 posts 数据，但是它里面没有值 ..

回到项目 .. 因为 Http 请求是异步动作 .. 这里需要在前面添加一个 await ，等待一下请求的结果 .. 有了结果以后，会把得到的值交给 posts ..

再回到 posts 页面 .. 现在这个页面上会显示一个内容列表 ..