onMounted is called when there is no active component instance to be associated with 已解决

最近写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

解决方法：
[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().

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>

希望可以帮到你。