Nuxt.js 在页面重新加载时获取

Question

使用 nuxt.js fetch() ，每当我重新加载页面时，它都不会再次获取它。 仅当我来自路由器链接时。 如何强制它从我的 API 实际重新获取？

export default {
    async fetch() {
        const data = await this.$axios.$get(`/users/${this.$route.params.name}`)
        this.user = data
    },
    data() {
        return {
            user: []
        }
    }
}

我查看的每个页面，他们总是在页面刷新时显示占位符，同时从他们的 API 重新获取，为什么我的 Nuxt.js 应用程序在刷新时不这样做？ 它只是不从我的 API 重新获取数据，这很奇怪。

Answer 1

刚刚遇到了同样的问题。

在 fetch 上浏览 Nuxt 文档的选项部分后，似乎将 fetchOnServer 选项设置为 false 会在客户端和页面重新加载时（服务器端）触发 fetch 钩子，解决问题：

fetchOnServer: false

Answer 2

我相信，在 Nuxt.JS 中，仅在从路由器导航渲染时调用 fetch 方法 - 手动重新加载不会触发此操作。

也许您可以使用beforeMount()而不是fetch()构造一个 mixin 并将其应用于需要它的页面。

或者当然，只是在页面本身上：

async beforeMount() {
    const data = await this.$axios.$get(`/users/${this.$route.params.name}`)
    this.user = data
},

https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/

Answer 3

在做 Nuxt 静态站点时，似乎没有解决重新加载问题的可行解决方案。 如果数据未在 fetch 钩子中加载，我的一个选项是在已挂载的钩子中调用 fetch：

  mounted() {
     if (!this.loaded) this.$fetch()
  },

作为一种方法获取