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) => {// 处理加载错误，打印错误信息并返回 nullconsole.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>