vue进阶——动态引入组件

秋书一叶

已于 2024-07-24 14:50:50 修改

阅读量2.4k

点赞数 14

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2024-03-13 13:44:51 首次发布

本文链接：https://blog.csdn.net/qq_51137480/article/details/136677793

版权

Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue3应用中，通过Vuex管理状态，实现根据selectedMapComponent动态导入并显示对应的城市组件。使用了import()函数进行异步加载，并利用watch和computed确保组件在状态变化时及时更新。

摘要由CSDN通过智能技术生成

vue进阶——动态引入组件

根据 Vuex 存储中的 selectedMapComponent 动态计算组件路径，并在组件创建时和 selectedMapComponent 变化时加载对应的动态组件。

运行逻辑如下：

引入 Vue 3 的相关函数和 Vuex 中的 useStore 函数，以及组件需要使用的依赖库。
使用 useStore 函数获取 Vuex 的 store 对象。
利用 computed 函数创建一个计算属性 selectedMapComponent，它根据 Vuex 中的 selectedMapComponent 的值动态构建组件路径。这个计算属性使用 import() 函数返回一个 Promise，该 Promise 用于异步加载对应的组件，如果加载失败，则捕获错误并返回 null。
创建一个响应式变量 dynamicComponent 用于存储动态加载的组件。
定义 loadDynamicComponent 函数，该函数通过 await 等待 selectedMapComponent 的 Promise 解析，并将动态加载的组件赋值给 dynamicComponent。
使用 watch 函数监听 Vuex 中 selectedMapComponent 的变化，当发生变化时，调用 loadDynamicComponent 函数重新加载动态组件。设置 { immediate: true } 选项，确保在组件初始化时也会立即调用一次。
在组件创建时，调用 onMounted 钩子，执行 loadDynamicComponent 函数，以确保初始时动态组件的加载。

<template>
	<component :is="dynamicComponent" />
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

// 计算属性，根据 store 中的 selectedMapComponent 动态计算组件路径
const selectedMapComponent = computed(() => {
    // 获取 selectedMapComponent 的值
    const mapType = store.state.selectedMapComponent;

    // 构建组件路径
    const componentPath = `./city/${mapType}.vue`;

    // 使用 import() 返回一个 Promise，加载组件
    return import(componentPath)
        .catch((error) => {
            // 处理加载错误，打印错误信息并返回 null
            console.error('Error loading component:', error);
            return null;
        });
});

// 动态组件的引用
const dynamicComponent = ref(null);

const loadDynamicComponent = async () => {
    try {
        const module = await selectedMapComponent.value;
        dynamicComponent.value = module.default;
    } catch (error) {
        console.error('Error loading component:', error);
    }
};

// 使用 watch 监听 selectedMapComponent 的变化
watch(() => store.state.selectedMapComponent, loadDynamicComponent, { immediate: true });

onMounted(() => {
    loadDynamicComponent();
});
</script>

Vite动态引入

使用 import() 函数异步加载对应的组件文件。加载完成后，返回加载的组件对象

const selectedMapComponent = computed(async () => {
    const mapType = store.state.selectedMapComponent;

    const componentPath = await import(`./city/${mapType}.vue`);

    return componentPath;
});