Tengo un proyecto vue que tiene varios paquetes de paquetes web. Sin embargo, una página podría tener múltiples paquetes presentes con múltiples componentes, por lo tanto, para que compartan la misma tienda, necesitamos un solo estado.
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 } });He visto que se hicieron muchas preguntas al respecto, pero todavía no pude encontrar una solución.
Sin embargo, esas soluciones parecen funcionar solo para el primer componente que importa la tienda. Para el siguiente componente de un paquete diferente que importa la tienda, ¡las propiedades calculadas no se vuelven a calcular! Solo me preguntaba si alguien se ha encontrado con esto o tiene una solución para compartir una tienda vuex entre diferentes paquetes de paquetes web. Gracias por adelantado.
Está bien. Encontré una solución. Puede que no sea perfecto, pero resolvió mi problema.
Usé laravel-mix webpack mix.extract para extraer vue y vuex.
mix.extract([ 'vue', 'vuex', ]); mix.js('src/main.js', 'dist/web-components.js').vue({ version: 2, options: { shadowMode: true, dontLeakScopedModules: false } });y genera dos scripts y los agrega a mi sitio web non 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>