javascript - 获取仅适用于刷新

Question

我正在尝试新的 Nuxt.js Fetch 方法。最初，我认为一切都很好。但是只有在我刷新页面时才会获取和呈现数据。但是，如果通过 $fetchState.error 访问该页面，则该错误等于 true，并且永远不会获取数据。

我在这里做错了什么？

<template>
  <main>
    <div>
      <div>
        <p v-if="$fetchState.pending">
          Fetching vehicles...
        </p>
        <p v-else-if="$fetchState.error">
          Error while fetching vehicles
        </p>
        <div
          v-for="(vehicle, index) in usedVehicles"
          v-else
          :key="index"
        >
          <nuxt-link :to="`cars/${vehicle.Id}`">
            {{ vehicle.Make }}
          </nuxt-link>
        </div>
      </div>
      <button @click="$fetch">Refresh Data</button>
    </div>
  </main>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      usedVehicles: []
    }
  },
  async fetch() {
    const { data } = await axios.get(
      'https://random.com/api'
    )
    // `todos` has to be declared in data()
    this.usedVehicles = data.Vehicles
  },
  methods: {
    refresh() {
      this.$fetch()
    }
  }
}
</script>

Answer 1

刚刚回答了一个相关问题:fetch

所以在生命周期钩子(Hook)中，

提取被调用(但仅在页面加载后完成)。这意味着当您刷新页面时，数据应该缓存在客户端(因此呈现 this.usedVehicles)。

如果你想确保在第一次挂载之前检索数据，你可以使用 asyncData 并等待调用 - 这样 usedVehicles 在页面被加载之前设置安装。

例子

<template>
  <main>
    <div>
      <div>
        <p v-if="$fetchState.pending">
          Fetching vehicles...
        </p>
        <p v-else-if="$fetchState.error">
          Error while fetching vehicles
        </p>
        <div
          v-for="(vehicle, index) in usedVehicles"
          v-else
          :key="index"
        >
          <nuxt-link :to="`cars/${vehicle.Id}`">
            {{ vehicle.Make }}
          </nuxt-link>
        </div>
      </div>
      <button @click="$fetch">Refresh Data</button>
    </div>
  </main>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      usedVehicles: []
    }
  },
  async asyncData() {
    const { data } = await axios.get(
      'https://random.com/api'
    )

    return { usedVehicles: data.Vehicles }
  }
  async fetch() {
    const { data } = await axios.get(
      'https://random.com/api'
    )
    // `todos` has to be declared in data()
    this.usedVehicles = data.Vehicles
  },
  methods: {
    refresh() {
      this.$fetch()
    }
  }
}
</script>

这意味着对于每个请求，检索数据都会有一些延迟 - 但这取决于这是否是您想要的结果。