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);