Vue3中如何在<script setup>组件内全局访问动态导入的函数

架构老林

2026-10-1

先修正模块的错误写法

你当前的*-check.js文件里直接调用useStore()是不符合规范的：组合式API的use*类方法只能在组件setup的同步执行上下文中调用，动态导入是异步行为，模块加载后执行时已经脱离了setup同步上下文，调用useStore()会直接报错。
修正后的模块代码：

// pme-check.js
// 移除内部的useStore调用，需要用到store时从参数传入即可
function foo(store) {
  console.log('foo');
}

function bar(store) {
 console.log('bar');
}

export { foo, bar };

方案1：使用顶层await（推荐）

Vue 3的<script setup>原生支持顶层await，等待异步导入完成后直接赋值给顶层变量，即可在整个setup作用域内随处调用：

<script setup>
import { useStore } from 'vuex'
const store = useStore()

// 等待动态导入完成后解构赋值给顶层变量
const { foo, bar } = await import(`../composables/profil/${store.state.formation.profil}-check`)

// 任意位置都可以直接调用
foo(store)
bar(store)

const customFunction = () => {
  // 函数内部也可以直接访问
  foo(store)
}
</script>

注意：如果使用Webpack/Vue CLI打包，需要在webpack配置中开启experiments.topLevelAwait: true，Vite环境默认支持无需额外配置。

方案2：顶层变量挂载（无法开启顶层await时使用）

如果项目环境不支持顶层await，可以将导入的方法挂载到顶层变量，调用时判断是否加载完成即可：

<script setup>
import { useStore } from 'vuex'
import { ref } from 'vue'
const store = useStore()

// 顶层声明响应式变量存储动态导入的方法
const dynamicFns = ref({})

import(`../composables/profil/${store.state.formation.profil}-check`).then(module => {
  dynamicFns.value = {
    foo: module.foo,
    bar: module.bar
  }
})

// 其他位置调用时先判断是否加载完成，避免报错
const testCall = () => {
  dynamicFns.value.foo?.(store)
  dynamicFns.value.bar?.(store)
}
</script>