Nuxt.js Hackernews API 更新帖子而不每分钟加载页面答案

【问题标题】：Nuxt.js Hackernews API update posts without loading page every minuteNuxt.js Hackernews API 更新帖子而不每分钟加载页面
【发布时间】：2023-01-09 21:27:36
【问题描述】：

我有一个 nuxt.js 项目：https://github.com/AzizxonZufarov/newsnuxt2 我需要每分钟从 API 更新帖子而不加载页面： https://github.com/AzizxonZufarov/newsnuxt2/blob/main/pages/index.vue

我怎样才能做到这一点？

请帮助结束代码，我已经为此功能编写了一些代码。我也有这个强制更新按钮。它也不起作用。它将帖子添加到以前的帖子。这不是我想要的，我需要在单击它时强制更新帖子。

这是我到目前为止所拥有的

<template>
  <div>
    <button class="btn" @click="refresh">Force update</button>
    <div class="grid grid-cols-4 gap-5">
      <div v-for="s in stories" :key="s">
        <StoryCard :story="s" />
      </div>
    </div>
  </div>
</template>

<script>
definePageMeta({
  layout: 'stories',
})
export default {
  data() {
    return {
      err: '',
      stories: [],
    }
  },
  mounted() {
    this.reNew()
  },
  created() {
    /* setInterval(() => {
              alert()
        stories = []
        this.reNew()
        }, 60000) */
  },
  methods: {
    refresh() {
      stories = []
      this.reNew()
    },
    async reNew() {
      await $fetch(
        'https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty'
      ).then((response) => {
        const results = response.slice(0, 10)
        results.forEach((id) => {
          $fetch(
            'https://hacker-news.firebaseio.com/v0/item/' +
              id +
              '.json?print=pretty'
          )
            .then((response) => {
              this.stories.push(response)
            })
            .catch((err) => {
              this.err = err
            })
        })
      })
    },
  },
}
</script>

<style scoped>
.router-link-exact-active {
  color: #12b488;
}
</style>

【问题讨论】：

你想在这里做什么？仅限 SPA、SSR 还是 SSG？并非所有这些都与您想要的兼容。此外，定义“更新帖子”，您是希望用户手动刷新页面 (F5) 还是获取它？ SEO在这里很重要吗？
@kissu 仅限 SPA。没有 ssr 或 ssg。我想要这样：必须获取每一分钟的帖子，而无需使用 setInterval 以编程方式刷新页面本身。搜索引擎优化并不重要。
@kissu 我还有一个类 btn 的按钮。我需要通过单击手动获取帖子。
@kissu 这意味着我将拥有 2 个功能：每个 mnute 帖子本身都会一次又一次地获取；其次，当用户手动单击按钮时，将获取帖子。
如果是SPA，那肯定是可行的。 this.mounted 不是 Nuxt 中的东西。我建议您使用refresh()。此外，请使用 fetch() 生命周期挂钩而不是 mounted，因为您使用的是 Nuxt。您可以通过单击按钮或尝试使用 setInterval 来调用 refresh() 方法。就您的进度和调试过程，请在这里分享一些代码。要求人们只修复你的 GitHub 存储库并不是这个平台的工作方式。如果你尽自己的一份力量，我很乐意帮助你。

标签： vue.js nuxt.js nuxtjs3 hacker-news-api

【解决方案1】：

这就是您如何通过 useLazyAsyncData 钩子和 60 秒的 setInterval 有效地使用 Nuxt3 来定期获取数据。除了使用 async/await 而不是 .then 之外。
refreshData函数也是手动刷新数据，如果需要重新取。

我们正在使用useIntervalFn，所以请不要忘记安装@vueuse/core。

<template>
  <div>
    <button class="btn" @click="refreshData">Fetch the data manually</button>

    <p v-if="error">An error happened: {{ error }}</p>
    <div v-else-if="stories" class="grid grid-cols-4 gap-5">
      <div v-for="s in stories" :key="s.id">
        <p>{{ s.id }}: {{ s.title }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useIntervalFn } from '@vueuse/core' // VueUse helper, install it

const stories = ref(null)

const { pending, data: fetchedStories, error, refresh } = useLazyAsyncData('topstories', () => $fetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty'))

useIntervalFn(() => {
  console.log('refreshing the data again')
  refresh() // will call the 'topstories' endpoint, just above
}, 60000) // every 60 000 milliseconds

const responseSubset = computed(() => {
  return fetchedStories.value?.slice(0, 10) // optional chaining important here
})

watch(responseSubset, async (newV) => {
  if (newV.length) { // not mandatory but in case responseSubset goes null again
    stories.value = await Promise.all(responseSubset.value.map(async (id) => await $fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`)))
  }
})

function refreshData() { refreshNuxtData('topstories') }
</script>

【讨论】：

非常感谢你。我需要学习钩子，我明白了
@AzizxonZufarov 它能解决您的问题吗？

【解决方案2】：

由客户的开发人员亲手完成工作，然后要求全额付款，这是极不专业的行为。

我告诉过你，如果你继续坚持全额付款，那么反过来我将被迫向你收取我的时间成本。

对此，你写信给客户说我在向你勒索钱财。我不会在这里评估你的行为，所以一切都很清楚。

附言我向社区道歉。我明白我的信息不是关于问题的主题。但是这个角色在谈话中阻止了我。

附言如果你重视自己的精力和时间，我不建议与这个人一起工作。

【讨论】：