Este es el nombre de mi componente LayerComponent (ficticio).
<script> export default { data() { return { count: 0 } } } </script> <template> <button @click="count++">You clicked me {{ count }} times.</button> </template>
Necesito el elemento DOM de representación en el gancho montado de otro componente para una biblioteca de terceros. y también necesita acceder a la tienda.
En Vue 2 obtuve dom de esta manera.
import Vue from "vue"; import LayerComponentfrom "./LayerComponent"; ...other code ........ mounted() { const lsComponent = Vue.extend(LayerComponent) const domElement= new lsComponent({ store: this.$store, }).$mount(); let htmlElement = domElement.$el; //Now I can use this element in vanilla JavaScript. }
En Vue 2 esto funciona muy bien.
Pero, ¿cómo hago lo mismo en Vue 3?
He intentado de esta manera:
const lsApp = createApp(LayerComponent); lsApp.use(this.$store);
pero la tienda no funciona.
Nota: estoy usando VueX 4.
Gracias por adelantado.
El paso de parámetro a app.use()
debe ser un complemento de Vue, por lo que creo que debería exportar la instancia de la tienda export const store = createStore(options);
para pasar como parámetro en la expresión lsApp.use(store);