Cómo enviar un componente de Vue con su correspondiente Vuex y CSS para poder usarlo en diferentes proyectos.
Hola, tengo 2 proyectos, uno es core
y el otro es plugins
[ambos proyectos tienen su propia carpeta y package.js]. Mi intención es que el plugin funcione sin compilar desde core
de manera independiente.
Estructura del proyecto: solo se muestra la vista y no las carpetas
<Proyecto core> <!-- Proyecto core o proyecto 1 -->
<iframe src="plugin/dist/index.html"> <!-- Proyecto plugins o proyecto 2 -->
<Proyecto core>
Ahora me encuentro en una situación en la que necesito trasladar por completo css
y la tienda vuex
al plugin.
Aquí es cómo configuro el componente principal en el objeto body
cargado para que pueda usarse en plugins:
let coreComp1 = import('/path');
parent.document.components = coreComp1; // similar a jquery $('body').data('components',coreComp1)
Ahora en los plugins puedo acceder así:
<compx></compx>
...
{
components:{
compx: ()=> parent.document.components //<-- observe this line
}
}
Ahora el componente del core
se renderiza correctamente sin los métodos css
y vuex
.
Los métodos vuex
en mi componente principal son así:
{
methods:{
doAssetUpdate(){
this.updateAssets().then(...) <!-- **obteniendo el error:** Cannot read properties of undefined -->
},
...mapActions("assets", ["updateAssets"]),
}
}
Pregunta: teniendo en cuenta el escenario anterior, ¿cómo enviar el componente con el vuex
y css
utilizados?
Por favor ayúdame, ¡gracias de antemano!
davy.ai
Para enviar los componentes utilizando el almacén
vuex
ycss
usados, sigue estos pasos:plugins
tenga los paquetes npmvue
yvuex
instalados. Si no tienes, instálalos usando los siguientes comandos:core
, asegúrate de que tienes todos los archivoscss
necesarios importados en el componente principalApp.vue
. Si estás utilizando un archivocss
separado, asegúrate de importarlo utilizando el siguiente código:Si tienes
css
escrito en el componenteApp.vue
, asegúrate de incluirlo en el componente mismo.A continuación, asegúrate de que el almacén
vuex
de tu proyectocore
se exporte correctamente para que pueda ser utilizado enplugins
. En tu archivostore/index.js
del proyectocore
, exporta el almacén de esta manera:CoreComponent.vue
, asegúrate de que hayas importado correctamente el almacénvuex
y mapeado las acciones y/o getters que estás utilizando en el componente. Por ejemplo,core
en un solo archivo que incluya todas las dependencias necesarias devue
yvuex
. Para hacer esto, puedes utilizar webpack para crear un paquete de biblioteca:Este comando creará un archivo
myCoreLibrary.js
que incluirá todo el código necesario para tu proyectocore
, junto con sus dependencias.Finalmente, puedes usar el archivo
myCoreLibrary.js
en tu proyectoplugins
agregándolo al archivoindex.html
de la siguiente manera:Ahora, puedes utilizar el componente en
plugins
junto con su almacénvuex
y estiloscss
:Al seguir estos pasos, deberías poder enviar tus componentes
core
junto con su almacénvuex
y estiloscss
en tu proyectoplugins
sin necesidad de compilarlos juntos.