Vue.js 使用Vuex完成逻辑解耦

我正在使用Vue路由器和Vuex构建一个Vue web应用程序，使用Vue cli进行搭建。大多数项目结构非常简单，只有一个主商店和简单的路线：

project/
├── src/
│   ├── components/
│   │    ├── Hosting/
│   │    └── Website/
│   ├── router/
│   ├── store/
│   ├── App.vue
│   └── main.js
└── index.html

路由到

/Hosting

的

托管组件需要与网站的其余部分分离。该URL将承载一个组件，该组件将使用
加载到其他网站上。实现这种逻辑解耦的最佳方法是什么？我曾考虑在
托管
文件夹中包含一个
存储
目录，但不确定如何将其注入
托管
根组件。我考虑过使用，但这并没有真正实现我想要的，因为所有模块都可以从每个组件访问

请注意，实际上我并不需要
/hosting
端点使用与网站其余部分相同的路由，因为它只能作为
的
src
进行访问。因此，如果我需要对webpack如何编译项目做些什么（比如除了
index.html
之外，还要创建一个
hosting.html
目标），我可以这样做。
将托管组件视为一个完全独立的应用程序，它也可以让你自由地在其他网站上托管它。是的，创建一个hosting.html页面，显示在iframe和其他站点中

这将使您自己对该组件的使用与它在其他站点上的托管方式完全一致，并使查找bug变得更容易

您没有提到托管组件是否需要从包含的结构中获得任何数据或参数，但是如果是这样，您应该在托管主机的查询字符串中提供这个。HTML / < P> > P>您可以考虑约阿希姆给您的答案，我是指将2个应用程序拆分，并且我在我的应用程序（提供WebPACK配置）
上做这件事。
webpack.config.js

...
entry: {
    './app-1.js': './src/app1/main.js',
    './app-2.js': './src/app2/main.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/build/',
    filename: '[name]'
  },
...

如果您需要从两个应用程序访问同一个商店，我认为您应该重新考虑vuex中的模块解决方案。我正在将我的商店拆分为模块，并在每个应用程序中加载想要的模块（在beforeCreate生命周期挂钩的App.vue中）。看起来像这样：

main1.js

import Vue from 'vue'
import App from './App.vue'
import { store } from '../store/store';

new Vue({
  el: '#app2',
  store: store,
  render: h => h(App)
});

main2.js

import Vue from 'vue'
import App from './App.vue'
import { store } from '../store/store';

new Vue({
  el: '#app1',
  store: store,
  render: h => h(App)
});

（请注意，两个应用加载相同的存储）然后：

App1.vue

export default {
...
    beforeCreate() {
      // this is where we add dynamically specific modules used on this app.
      const store = this.$store;
      const modulesToBoDynamicallyRegistered = {
        [Types.module1.TYPE_NAME]:         module1,
        [Types.module2.TYPE_NAME]:         module2,
        [Types.module3.TYPE_NAME]:         module3,
        [Types.module4.TYPE_NAME]:         module4,
      };

      Object.keys(modulesToBoDynamicallyRegistered).forEach((moduleName) => {
        utils.registerModuleIfNotExists(store, moduleName, modulesToBoDynamicallyRegistered[moduleName]);
      });
    },
...
}

App2.vue

export default {
...
    beforeCreate() {
      // this is where we add dynamically specific modules used on this app.
      const store = this.$store;
      const modulesToBoDynamicallyRegistered = {
        [Types.module7.TYPE_NAME]:         module7,
        [Types.module9.TYPE_NAME]:         module9,
      };

      Object.keys(modulesToBoDynamicallyRegistered).forEach((moduleName) => {
        utils.registerModuleIfNotExists(store, moduleName, modulesToBoDynamicallyRegistered[moduleName]);
      });
    },
...
}

存储本身包含以下通用模块：

store.js

import Vue from 'vue';
import Vuex from 'vuex';

import module5 from './modules/module5/index';
import module6 from './modules/module6/index';

Vue.use(Vuex);

export const store = new Vuex.Store({
  modules: {
    module5,
    module6,
  }
});

如果需要注册模块ifnotexists

功能：

registerModuleIfNotExists: (store, moduleName, module) => {
    if (!(store && store.state && store.state[moduleName])) {
        store.registerModule(moduleName, module);
      } else {
        // re-use the already existing module
        throw `reusing module: ${moduleName}`;
      }
  },