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

Question

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

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

_slug.js（对于/用户）

<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 您可以设置绝对 link 以在用户导航时呈现服务器端，但我不知道'推荐这个。最好的解决方案是在 api.

中的 redis 中缓存数据

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

Nuxtjs Redis cache implementation for API calls inside components

redis

nuxt.js

nuxtjs