Nuxt.js开发中碰到的问题（三）axios 获取数据及vuex发送请求

博客原文链接

Nuxt.js 发送请求

安装相关插件

Nuxt.js 有专门用来请求数据的方法 asyncData，同时也自带 axios 及跨域代理插件 proxy，只需要npm安装一下，并在配置文件中添加即可；

npm i -D @nuxtjs/axios @nuxtjs/proxy

插件引入及代理设置

asyncData 方法

官方教程

虽然官方有教程，但是有些地方在实际应用时说明的不清楚，所以实践过程中也查阅了大量资料；

export default {
  async asyncData({app, params}) {
    const res = await app.$axios.get(url)
    try {
      console.log(res)
    } catch (err) {
      console.log(err)
    }
  }
}

之前我们已经引入了 Nuxt.js 内部的 axios，这里在使用 asyncData 方法时会需要 this 来调用，但是，由于 asyncData 方法是在组件初始化前加载的，所以无法使用 this 来指向实例对象；为此，可以再 params 参数之前添加一个参数 app 来指向实例对象，这样就可以通过 app.$axios 来调用 axios 了

fetch 方法

官方教程

export default {
  fetch ({ app, store, params }) {
    return app.$axios.get(url).then((res) => {
      store.commit('getTagList', res.data.tag)
    })
  }
}

与 asyncData 方法类似，同样需要 添加一个参数 app 来调用 axios