多个 webpack 包，一个 vuex 存储答案

【问题标题】：Multiple webpack bundles, one vuex store多个 webpack 包，一个 vuex 存储
【发布时间】：2022-01-24 05:20:36
【问题描述】：

我有一个包含多个 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 商店。提前致谢。

【问题讨论】：

标签： javascript vue.js webpack vue-component vuex

【解决方案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>

【讨论】：