关于vue3:onMounted-is-called-when-there-is-no-active-component-已解决

最近写 vue3+ts 和组合式 API 遇到了下面的问题，代码如下：

<template>
  
</template>

<script setup lang="ts">
import {useStore} from 'vuex'
import {useRoute} from 'vue-router'
import {onMounted} from 'vue'

const store = useStore()
store.dispatch('initMenus')

const route = useRoute()

onMounted(() =>{console.log(route.path)
})

</script>

<style lang="scss" scoped>

</style>

这个是因为在这个组合式 onMounted 之前调用了 store.dispatch(‘initMenus’) 外部蕴含 async/await

解决办法：

If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

只有把代码程序调整如下，报错即可隐没：

<template>
  
</template>

<script setup lang="ts">
import {useStore} from 'vuex'
import {useRoute} from 'vue-router'
import {onMounted} from 'vue'

const route = useRoute()

onMounted(() =>{console.log(route.path)
})

const store = useStore()
store.dispatch('initMenus')

</script>

<style lang="scss" scoped>

</style>

心愿能够帮到你。