vue.js - Nuxt JS 插件是否可以只运行一次？

Question

我有几个 VueX 操作(仅在服务器上运行)并从 nuxtServerInit 分派(dispatch)。 .他们向外部服务发出 HTTP 请求，这会减慢 TTFB。
我想实现一个可以从 Redis 存储和检索值的缓存插件。目的是避免在每个请求的操作中生成 HTTP 请求。
我首先在 nuxt.js 配置文件中添加了一行。{ src: '~/plugins/cache', ssr: true, mode: 'server' },然后我在 resources/plugins/cache.js 中创建了以下内容

import redis from 'redis';

export default ({ app }, inject) => {
  console.log('Creating redis client');
  inject('cache', redis.createClient({
    //options removed for brevity
  }));
}

我运行该应用程序，可以看到每次刷新页面时都会将“正在创建 redis 客户端”打印到控制台。是否可以创建一个在服务器启动时实例化的插件，并且每个请求都使用相同的实例？或者如果这不可能，实现缓存的最佳方法是什么？

Answer 1

当您想要共享数据/实例时，插件不是这样做的正确位置，因为每次创建新的 Vue 实例时都会创建(调用)插件，这在服务器上意味着每次请求......
所以你需要每台服务器只实例化一次......那就是 Nuxt modulemodules/cacheModule.js

export default function (_moduleOptions) {
  // any data you want to share between all requests
  const data = {
    message: `Hello from cache - ${new Date().toLocalTimeString()}`
  };

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

并在服务器插件或 nuxtServerInit 中使用...store/index.js

export const state = () => ({
  cache: {}
});

export const mutations = {
  setcache(state, payload) {
    state.cache = payload;
  }
};

export const actions = {
  nuxtServerInit({ commit }, context) {
    commit("setcache", context.ssrContext.$cache);
  }
};

Demo
相同的技术可用于应用 cacheAdapterEnhancer来自 axios-extensions在服务器/客户端(或两者)Axios 实例上打包，以便您可以保留原始代码(在 nuxtServerInit 中获取)- 更多详细信息 here