多应用 Nuxt 上的共享商店

Shared stores on multi applications 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);
};