Nuxt JS 插件是否可以只运行一次？答案

【问题标题】：Is it possible for Nuxt JS plugins to only run once?Nuxt JS 插件是否可以只运行一次？
【发布时间】：2020-12-20 16:34:37
【问题描述】：

我有几个 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 客户端”。是否可以创建一个在服务器启动时实例化的插件，并且每个请求都使用相同的实例？或者如果这不可能，实现缓存的最佳方式是什么？

【问题讨论】：

为什么要在服务器端调度这些操作？

标签： vue.js vuejs2 vuex nuxt.js

【解决方案1】：

当您想要共享数据/实例时，插件不是这样做的正确位置，因为每次创建新的 Vue 实例时都会创建（调用）插件，这在服务器上意味着每次请求...

所以你需要每台服务器只实例化一次......那就是 Nuxt module

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

Demo

同样的技术可用于在服务器/客户端（或两者）Axios 实例上应用 axios-extensions 包中的 cacheAdapterEnhancer，这样您就可以保留原始代码（在 nuxtServerInit 中获取） - 更多详细信息 here

【讨论】：