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异常的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue.js 混入的相关资料，文中讲解非常细致，示例代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了vue3使用深度选择器修改样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了新手入门vue 使用vue-cli创建项目的图文教程，本文是针对完全不了解过vue和npm的小白而写的,需要的朋友可以参考下2018-05-05
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
这几天在做项目时遇到微信扫描二维码的然后进入公众号网页巴拉巴拉的，然后就很顺利的遇到了在安卓端扫码的时候，顺利的一塌糊涂，然后到了苹果端的时候，就只能出现一个保存图片，然后就写一下记录一下这问题的解决方法2020-01-01
本篇文章主要介绍了vue-axios使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了详解iview的checkbox多选框全选时校验问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要介绍了vue-cli3 DllPlugin 提取公用库 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了Vue的路由及路由钩子函数的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
Vue 3引入了两个新的API,ref和reactive,用于创建响应式对象,这两个方法都位于Vue.prototype上,因此可以在组件实例中直接使用,本文给大家介绍vue3使用ref和reactive的示例,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了vue-router传参的四种方式超详细,有router-link路由导航方式传参，调用$router.push实现路由传参，通过路由属性name匹配路由，再根据params传递参数等等，结合示例代码讲解的非常详细，需要的朋友可以参考下2022-12-12
最新评论