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>

希望可以帮到你。