vue3 ts组合式API异常onMounted is called when there is no active component解决

更新时间：2023年05月24日 09:02:20 作者：来了老弟

这篇文章主要为大家介绍了vue3 ts组合式API异常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>

希望可以帮到你。

以上就是vue3 ts组合式API异常onMounted is called when there is no active component解决的详细内容，更多关于vue3 ts组合式API异常的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

1分钟Vue实现右键菜单
今天给大家分享的是，如何在最短的时候内实现右键菜单。高效实现需求，避免重复造轮子。感兴趣的可以了解一下
2021-10-10
vue实现点击隐藏与显示实例分享
在本篇文章中小编给大家分享了vue如何实现点击隐藏与显示的相关内容，有需要的朋友们跟着学习下。
2019-02-02
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
这篇文章主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue使用pdfjs显示PDF可复制的实现方法
这篇文章主要介绍了vue使用pdfjs显示PDF可复制的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Vue组件模板及组件互相引用代码实例
这篇文章主要介绍了Vue组件模板及组件互相引用代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-03-03
如何在 Vue 中使用 Axios 异步请求API
Axios 是 Javascript 中最受欢迎的 HTTP 库之一，我们可以用它在 Vue 程序中调用API。在本文中我们用 Vue 3 和 Axios 写一个侃爷语录小应用，可以用这个小程序学习英语，同时也能从侃爷的话中得到一些启发，而且还可以学习用 Vue 异步请求API，一举多得，何乐而不为呢？
2021-05-05
Vue Router中应用中间件的方法
这篇文章主要介绍了Vue Router中应用中间件的方法，文中讲解非常细致，帮助大家更好的理解和学习vue router,感兴趣的朋友可以了解下
2020-08-08
详解刷新页面vuex数据不消失和不跳转页面的解决
这篇文章主要介绍了详解刷新页面vuex数据不消失和不跳转页面的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Vue中的反向代理
这篇文章主要介绍了Vue中的反向代理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
详解unplugin vue components不能识别组件自动导入类型pnpm
这篇文章主要为大家介绍了unplugin vue components不能识别组件自动导入类型pnpm详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01