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()
  },

作為一種方法獲取