vue进阶——动态引入组件

vue进阶——动态引入组件

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

运行逻辑如下：

1. 引入 Vue 3 的相关函数和 Vuex 中的 useStore 函数，以及组件需要使用的依赖库。

2. 使用 useStore 函数获取 Vuex 的 store 对象。

3. 利用 computed 函数创建一个计算属性 selectedMapComponent，它根据 Vuex 中的 selectedMapComponent 的值动态构建组件路径。这个计算属性使用 import() 函数返回一个 Promise，该 Promise 用于异步加载对应的组件，如果加载失败，则捕获错误并返回 null。

4. 创建一个响应式变量 dynamicComponent 用于存储动态加载的组件。

5. 定义 loadDynamicComponent 函数，该函数通过 await 等待 selectedMapComponent 的 Promise 解析，并将动态加载的组件赋值给 dynamicComponent。

6. 使用 watch 函数监听 Vuex 中 selectedMapComponent 的变化，当发生变化时，调用 loadDynamicComponent 函数重新加载动态组件。设置 { immediate: true } 选项，确保在组件初始化时也会立即调用一次。

7. 在组件创建时，调用 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>