时间戳

首页 > 解决方案 > Nuxt JS 插件是否可以只运行一次？

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

问题描述

我有几个 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.jsvuejs2vuexnuxt.js

解决方案

当您想要共享数据/实例时，插件不是这样做的正确位置，因为每次创建新的 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);
  }
};

演示

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

推荐阅读