Nuxt.js中Axios的使用

Nuxt.js中Axios的使用

• 1. 安装

npm install --save axios

• 2. 配置

为防止重复打包，在nuxt.config.js中配置

module.exports = {
  build: {
    vendor: ['axios']
  }
}

• 3. 重启

每当更改nuxt.config.js中配置,需要重新启动项目:

npm run dev  

• 4. 使用

必要知识储备:

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。所以需要注意这个函数中不能使用this

注意：常规写法如果在created钩子中写异步，是在客户端渲染的而不是在服务端

使用方法：asyncData(context, callback) {callback(null, data)}

context.route.params.xxx获取参数或者context.params.xxx

callback(new Error(), data)渲染出错的页面

注意：这个方法在服务器端执行和在客户端执行的区别

import axios from 'axios'

asyncData(context, callback) {
  axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(res => {
      console.log(res);
      callback(null, {list: res.data})
    })
}