只有在刷新时才会出现Fetch

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

刚刚回答了一个相关的问题re。fetch

所以在生命周期的钩子中

这意味着，当你刷新页面时，数据应该被缓存在客户端（因此会呈现出 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>

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