多个 webpack 包，一个 vuex store

Question

我有一个包含多个 webpack 包的 vue 项目。然而，一个页面可能有多个包含多个组件的包，因此为了让它们共享同一个商店——我们需要一个单一的状态。

webpack.mix.js

mix.js(['src/searchFilters.js'], 'dist/search-filter-components.js').vue({
    version: 2,
    options: {
        shadowMode: true,
        dontLeakScopedModules: false
    }
});

mix.js('src/provider.js', 'dist/provider-components.js').vue({
    version: 2,
    options: {
        shadowMode: true,
        dontLeakScopedModules: false
    }
});

我看到很多问题被问到，但仍然找不到解决方案。

然而，这些解决方案似乎只适用于导入商店的第一个组件。对于导入商店的不同包中的下一个组件 - 计算的属性不会重新计算！只是想知道是否有人遇到过这个或者有解决方案来在不同的 webpack 包之间共享 vuex 存储。提前致谢。

Answer 1

好的。我找到了解决办法。我可能不是一个完美的人，但它解决了我的问题。

我使用laravel-mix webpack mix.extract提取vue和vuex

mix.extract([
    'vue', 'vuex',
]);

mix.js('src/main.js', 'dist/web-components.js').vue({
    version: 2,
    options: {
        shadowMode: true,
        dontLeakScopedModules: false
    }
});

它生成两个脚本并将这些脚本添加到我的非 vue 网站。

<script defer="" src="http://ox_byondmarket/search-filter-components.js"></script>
<script type="text/javascript" src="http://ox_byondmarket/manifest.js"></script>
<script type="text/javascript" src="http://ox_byondmarket/vendor.js"></script>
<search-filters page="search"></search-filters>

多个 webpack 包，一个 vuex store

Multiple webpack bundles, one vuex store

javascript

webpack

vue.js

vue-component

vuex