Nuxt JS 插件可以只运行一次吗？

Question

我有几个 VueX 操作（仅在服务器上运行）并从nuxtServerInit. 他们向外部服务发出 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模块

modules/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);
  }
};

演示

可以使用相同的技术cacheAdapterEnhancer从服务器/客户端（或两者）上的axios-extensions包应用Axios 实例，以便您可以保留原始代码（在 中获取nuxtServerInit） - 更多详细信息请点击此处