Блог

При использовании 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, что странно.

Просто столкнулся с той же проблемой.

После просмотра раздела параметров документов Nuxt в fetch, похоже, что установка параметра fetchOnServer в значение false запускает перехват выборки как на стороне клиента, так и при перезагрузке страницы (на стороне сервера), решая проблему:

 fetchOnServer: false
  

Я полагаю, в Nuxt.JS, метод выборки вызывается только при рендеринге из навигации маршрутизатора — ручная перезагрузка не вызовет этого.

Возможно, вы могли бы создать mixin с использованием beforeMount() вместо fetch() и применить это к страницам, где это требовалось.

Или, конечно, только на самой странице:

 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/

Кажется, нет жизнеспособного решения проблемы перезагрузки при выполнении статического сайта Nuxt. Для меня вариант — вызвать выборку в смонтированном хуке, если данные не были загружены в хук выборки:

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

Выборка как метод