Tengo un proyecto con elementos personalizados anidados. Ahora necesito el enrutador vuex y vue. ¿Cómo puedo usar estos paquetes desde el elemento personalizado raíz y luego usarlos en todos los elementos personalizados secundarios?
Actualmente intenté usar solo vuex dentro de cada componente de esta manera:
<script> import store from './store'; export default { setup() { const state = store.state; return { state }; }, }; </script>Aquí hay un proyecto de demostración con elementos personalizados anidados
Aquí está mi código de archivo main.js :
import { defineCustomElement } from "./defineCustomElementWithStyles"; import App from "./App.ce.vue"; customElements.define("app-root", defineCustomElement(App));Los complementos de Vue requieren la instancia de la aplicación, que no está definida para los componentes creados a partir de defineCustomElement() . Como solución alternativa, puede instalar los complementos en una instancia de aplicación temporal y luego copiar el contexto resultante en la aplicación real, como se ve en esta utilidad (que usaremos más adelante):
// defineCustomElementWithStyles.js import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue' export const defineCustomElement = (component, { plugins = [] } = {}) => VueDefineCustomElement({ render: () => h(component), setup() { const app = createApp() // install plugins plugins.forEach(app.use) const inst = getCurrentInstance() Object.assign(inst.appContext, app._context) Object.assign(inst.provides, app._context.provides) }, }) Utilice el defineCustomElement() anterior en lugar del de vue :
// main.js import { defineCustomElement } from './defineCustomElementWithStyles' import App from './App.ce.vue' import store from './store' import router from './router' customElements.define( 'app-root', defineCustomElement(App, { plugins: [store, router], }) )Puede importarlos en su archivo main.js , que es el archivo donde inicializa la instancia de vue.
import Vue from 'vue'; import store from './store'; import { Router } from './router/index.js'; new Vue({ router: Router, store, render: h => h(App), }).$mount('#app');Las rutas pueden ser diferentes a las suyas, así que siéntase cómodo editándolas para su propio proyecto.