组件内部 API 调用的 Nuxtjs Redis 缓存实现

Question

我正在使用插件Nuxt Perfect Cache 将我的 QPI 请求在服务器端缓存到外部服务。

我在组件级别使用 cacheFetch 方法，并且该组件加载到动态页面上（由其 slug 定义）。当我导航到动态页面时，API 调用不会缓存在 Redis 中，但是当我重新加载页面时，缓存会按预期发生。 以下是我的代码的结构：

_slug.js（用于 /users）

<template>
  <h1>{{ user.name }}</h1>
  <Posts :author = user.id>
</template>

<script>
import Posts from '~/components/Posts.vue'
export default {
  components: { Posts },
  async asyncData({params}) {
    const user = await fetch(`/users/${params.slug}`)
    .then(res => res.json())
  }
}
</script>

在 Posts.vue 中，我使用完美的缓存 cacheFetch 方法来获取帖子列表，类似于：

props: ['author'],
async fetch() {
  this.posts = await this.$cacheFetch({ key:`user--#{this.author}--posts`, expire: 60 * 60 },
    async () => {
      return await fetch(`/users/#{this.author}/posts`).then(res => res.json())
    })
},
data() {
  return {
    posts: []
  }
}

当我直接在浏览器中加载用户页面时，帖子的 json 响应按预期保存在 Redis 中。当我使用 NuxtLink 从应用程序中导航时，用户页面正确显示（包括帖子），但没有设置或从 Redis 获取任何键。

如何确保在用户与应用交互时缓存 API 调用？

Answer 1

当您在客户端导航时，redis 仅在服务器端而不是客户端可用，您无权访问 redis，您可以在用户导航时设置绝对链接以呈现服务器端，但我不建议这样做。 最好的解决方案是在你的 api 中的 redis 中缓存数据。