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

【问题标题】：Nuxt.js fetch on page reloadNuxt.js 在页面重新加载时获取
【发布时间】：2020-08-25 21:11:30
【问题描述】：

使用 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 重新获取数据，这很奇怪。

【问题讨论】：

标签： javascript vue.js nuxtjs

【解决方案1】：

刚刚遇到同样的问题。

在浏览了有关 fetch 的 Nuxt 文档的options section 之后，似乎将 fetchOnServer 选项设置为 false 会在客户端和页面重新加载（服务器端）上触发 fetch 挂钩，从而解决了这个问题：

fetchOnServer: false

【讨论】：

好的，但这不会吹走 SSR 吗？

【解决方案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/

【讨论】：

那么使用 fetch 有什么意义呢？

【解决方案3】：

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

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

Fetch as a method

【讨论】：

设置fetchOnServer: false有什么问题？
是的，这是另一种可能性，但使用它会失去静态站点生成优势，因为它会告诉 Nuxt 应用程序仅使用客户端
this.loaded 是什么？
@panjigemilang 布尔标志，用于判断资源是否已加载
是在data() 发起的吗？如果我将它设置为false，它不会总是false 吗？为什么我不直接打电话给$fetch()？