programing

다중 응용 프로그램의 공유 저장소 Nuxt

prostudy 2022. 7. 3. 09:05
반응형

다중 응용 프로그램의 공유 저장소 Nuxt

저는 멀티앱 Nuxt 프로젝트를 구축하지만, 이러한 앱들은 서로 직접 통신하지 않습니다.각 앱에 스토어가 있어 공유 스토어에 디렉토리를 사용하고 싶습니다.컴포넌트에 대해 이 접근방식을 사용하고 있으며, 이 접근방식은 정상적으로 동작합니다.

|-> app1
|   |-> store // store app1
|   |   |-> moduleapp1.js
|   |-> components // component app1
|   |-> nuxt.config.js
|
|-> app2
|   |-> store // store app2
|   |   |-> moduleapp2.js
|   |-> components // component app2
|   |-> nuxt.config.js
|
|-> store // shared stores for all app
|   |-> shared_module_1.js
|   |-> shared_module_2.js
|-> components // components for all app, that works fine

각 앱에는 nuxt.config.js가 거의 비슷합니다.

export default {
  srcDir: __dirname,
  buildDir: '.nuxt/app1',
  dir: {
    static: '../static/', //shared static
    assets: '../assets/', //shared assets
    //store: allow only a string, not Array 
  },
  plugins: [
    '../plugins/plugin_1', //own plugin
    './plugins/plugin_2', //shared plugin
  ],
  components: [
    '../components', //shared components
    {
      path: '../components/grid/', //shared components
      ignore: './filter/*.vue' //shared components

    },
    {path: './components/modal/', prefix: 'Modal'}, //own component
    {path: './components/nav/', prefix: 'Nav'}, //own component
  ]
}

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-dir

각 앱은 자체 컴포넌트 및 공유 컴포넌트를 사용하고 플러그인도 사용하므로 정상적으로 동작합니다.하지만 매장에서는 어떻게 하면 좋을지 모르겠습니다만, 가능할까요?

다음과 같은 솔루션이 플러그인 사용입니다.


// plugin/loadStore.js
// - List of shared stores
import Grid from '../store/grid';
import Map from '../store/map';
import Sidebar from '../store/sidebar';

export default ({isClient, store}) => {

  const opts = {}
  if (isClient) {
    opts.preserveState = true;
  }

  store.registerModule('grid', Grid, opts);
  store.registerModule('map', Map, opts);
  store.registerModule('sidebar', Sidebar, opts);
};

언급URL : https://stackoverflow.com/questions/67737667/shared-stores-on-multi-applications-nuxt

반응형