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

앱을 실행하면 페이지를 새로 고칠 때마다 콘솔에 'Creating redis client'가 인쇄됩니다.서버가 시작되어 모든 요청에 대해 동일한 인스턴스가 사용될 때 인스턴스화된 플러그인을 작성할 수 있습니까?그렇지 않다면 캐시를 구현하는 가장 좋은 방법은 무엇입니까?

데이터/인스턴스를 공유하려면 플러그인이 적합하지 않습니다.새로운 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 인스턴스의 actios-extensions 패키지에서 원래 코드를 유지할 수 있습니다(페치인).nuxtServerInit) - 자세한 내용은 이쪽

언급URL : https://stackoverflow.com/questions/63689739/is-it-possible-for-nuxt-js-plugins-to-only-run-once