为什么 axios 请求在 vuejs (nuxt.js) 方法中不起作用

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

    }

  } 

}

为什么内部methodsaxios 请求不起作用？

Answer 1

每次加载页面之前都会调用 AsyncData 方法，还要注意 asyncdata 仅在 nuxt 中的页面组件中可用。你不必通过访问组件实例 这里面asyncData，因为它正在启动组件之前调用。您可以在模板中使用从 asyncData 数据返回的数据，而无需在数据中进行初始化。