Vue 3安装模板中的动态组件

Question

我有以下问题。

<script setup lang="ts">
import { RouterView } from "vue-router";
import defaultLayout from "@/layouts/default.vue";
import { useDefaultStore } from "@/stores/default";
let { getLayout } = useDefaultStore();
</script>
<template>
<component :is="getLayout">
<RouterView />
</component>
</template>

我用Pinia作为商店。我检查了getLayout，它正在获取defaultLayout

我知道在Vue.js 2中你必须注册它：

export default {
components: {
defaultLayout
}
}

我现在该怎么做？

Answer 1

你不能那样对商店进行去结构，你必须使用PiniasstoreToRefs()(https://pinia.vuejs.org/core-concepts/#using-商店(。也许这与此有关，没有商店的代码我无法判断。

我建议使用这个插件https://github.com/JohnCampionJr/vite-plugin-vue-layouts如果您正在使用Vite并需要布局。

Answer 2

使用定义异步组件

defineAsyncComponent(() => import("@/layouts/default.vue"))

或在main.js:中全局注册组件

app.component('defaultLayout', defaultLayout)