Question

我已经在我的nuxt.js应用程序中安装了axios。这是我的配置文件代码：

文件： nuxt.config.js

modules: [
  '@nuxtjs/vuetify',
  '@nuxtjs/axios',
],

axios: {
  // proxyHeaders: false
}

这是我的示例工作代码：

export default {
  data() {
    return {
      ip: ''
    }
  },
  async asyncData({ $axios }) {
    const ip = await $axios.$get('http://icanhazip.com')
    return { ip }
  }
}

这是我不起作用的代码：

export default {
  data() {
    return {
      ip: ''
    }
  },
  methods: {
    async asyncData() {
      const ip = await this.$axios.$get('http://icanhazip.com')
      this.ip = ip
    }
  } 
}

为什么在methods内部axios请求不起作用？

Answer 1

您不能在方法对象中调用asyncData。 asyncData仅用于预渲染。

将函数重命名为其他名称，应该没问题：

export default {
  data() {
    return {
      ip: ''
    }
  },
  methods: {
    async getData() {
      const ip = await this.$axios.$get('http://icanhazip.com')
      this.ip = ip
    }
  } 
}

此外，如上例所示，在使用asyncData时，请勿在数据函数中初始化“ ip”。从asyncData返回的内容仍然会合并到数据中。

Answer 2

每次加载页面之前都会调用AsyncData方法，另外请注意，异步数据仅在nuxt的页面组件中可用。您无法通过asyncData内部的 this 访问组件实例，因为在启动组件之前它被称为。您可以使用模板中asyncData数据返回的数据，而无需初始化数据。

Nuxt asyncData

为什么axios请求在vue.js（nuxt.js）方法中不起作用

2 个答案: