為什么axios請求在vue.js（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
    }
  } 
}

為什么axios請求的內部methods不起作用？

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方法，另外請注意，asyncdata僅在nuxt的頁面組件中可用。 您無法通過asyncData內部的此實例訪問組件實例，因為在啟動組件之前會調用它。 您可以使用模板中asyncData數據返回的數據，而無需初始化數據。

Nuxt asyncData