多应用 Nuxt 上的共享存储答案

【问题标题】：Shared stores on multi applications Nuxt多应用 Nuxt 上的共享存储
【发布时间】：2021-05-28 11:03:02
【问题描述】：

我构建了多应用 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

每个应用程序都使用自己的和共享的组件以及插件，而且效果很好。但是我不知道如何使用 store 来做到这一点，这可能吗？

【问题讨论】：

嗯，我可能错了，但这似乎对我来说是不可能的。
谢谢，但是对于组件，这个概念可以正常工作。
在项目之外是完全不同的事情，也就是将您的状态导出到代码库之外并将其导入其他地方。它不像是一些纯文本，而是一些动态运行时值。所以是的，根本不是同一个范围。
但我可能错了。我想你已经做过的一个例子可能会证明我错了。你有minimal reproducible example吗？
一种解决方案可能是使用唯一的存储目录并设置dir:{store: '../store'} 并将所有模块放入此目录中。这会起作用，但所有应用程序都会加载他们从不使用的模块。不完美！

标签： nuxt.js vuex

【解决方案1】：

使用插件是解决方案，就像这样：


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

【讨论】：

谢谢，我正在寻找解决方案。