vue.js - nuxt.js - 如何在服务器端为所有客户端缓存 axios 调用

Question

我正在使用 vue + nuxt.js 应用程序，我想知道是否可以为所有客户端缓存 axios webservice 调用。我必须获取一些货币引用数据，而每个客户都必须调用这些数据并没有多大意义。

有人可以给我一些提示甚至一个例子吗？谢谢。

Answer 1

这是使用本地定义模块的最新 Nuxt 2.11 的工作解决方案。

首先在 nuxt.config.js 中添加一个本地模块

modules: [
   "@/modules/axCache",
...
]

然后

//  modules/axCache.js
import LRU from "lru-cache"

export default function(_moduleOptions) {
  const ONE_HOUR = 1000 * 60 * 60
  const axCache = new LRU({ maxAge: ONE_HOUR })

  this.nuxt.hook("vue-renderer:ssr:prepareContext", ssrContext => {
    ssrContext.$axCache = axCache
  })
}

和

// plugins/axios.js
import { cacheAdapterEnhancer } from "axios-extensions"
import LRU from "lru-cache"
const ONE_HOUR = 1000 * 60 * 60

export default function({ $axios, ssrContext }) {
  const defaultCache = process.server
    ? ssrContext.$axCache
    : new LRU({ maxAge: ONE_HOUR })

  const defaults = $axios.defaults
  // https://github.com/kuitos/axios-extensions
  defaults.adapter = cacheAdapterEnhancer(defaults.adapter, {
    enabledByDefault: false,
    cacheFlag: "useCache",
    defaultCache
  })
}

请注意，这适用于服务器/客户端，并且可以配置为仅在一侧工作。

在以下位置找到解决方案: https://github.com/nuxt-community/axios-module/issues/99