Vue 3 如何获取渲染的 html 元素？

Question

这是我的组件名称 LayerComponent（虚拟）。

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

我需要在另一个组件的挂载钩子中为第三方库渲染 DOM 元素。 并且还需要访问商店。

在 Vue 2 中，我通过这种方式渲染了 dom。

    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.
   }

在 Vue 2 中，这非常有效。

但是我如何在 Vue 3 中做同样的事情呢？

我试过这样：

    const lsApp = createApp(LayerComponent);
    lsApp.use(this.$store);

但商店不工作。

注意：我使用的是 VueX 4。

提前致谢。

Answer 1

传递给app.use()的参数必须是一个 Vue 插件，所以我认为你应该导出商店实例export const store = createStore(options); 在表达式lsApp.use(store);