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实现右键菜单

    1分钟Vue实现右键菜单

    今天给大家分享的是,如何在最短的时候内实现右键菜单。高效实现需求,避免重复造轮子。感兴趣的可以了解一下
    2021-10-10
  • vue实现点击隐藏与显示实例分享

    vue实现点击隐藏与显示实例分享

    在本篇文章中小编给大家分享了vue如何实现点击隐藏与显示的相关内容,有需要的朋友们跟着学习下。
    2019-02-02
  • vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    这篇文章主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue使用pdfjs显示PDF可复制的实现方法

    vue使用pdfjs显示PDF可复制的实现方法

    这篇文章主要介绍了vue使用pdfjs显示PDF可复制的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue组件模板及组件互相引用代码实例

    Vue组件模板及组件互相引用代码实例

    这篇文章主要介绍了Vue组件模板及组件互相引用代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • 如何在 Vue 中使用 Axios 异步请求API

    如何在 Vue 中使用 Axios 异步请求API

    Axios 是 Javascript 中最受欢迎的 HTTP 库之一,我们可以用它在 Vue 程序中调用API。在本文中我们用 Vue 3 和 Axios 写一个侃爷语录小应用,可以用这个小程序学习英语,同时也能从侃爷的话中得到一些启发,而且还可以学习用 Vue 异步请求API,一举多得,何乐而不为呢?
    2021-05-05
  • Vue Router中应用中间件的方法

    Vue Router中应用中间件的方法

    这篇文章主要介绍了Vue Router中应用中间件的方法,文中讲解非常细致,帮助大家更好的理解和学习vue router,感兴趣的朋友可以了解下
    2020-08-08
  • 详解刷新页面vuex数据不消失和不跳转页面的解决

    详解刷新页面vuex数据不消失和不跳转页面的解决

    这篇文章主要介绍了详解刷新页面vuex数据不消失和不跳转页面的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue中的反向代理

    Vue中的反向代理

    这篇文章主要介绍了Vue中的反向代理,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 详解unplugin vue components不能识别组件自动导入类型pnpm

    详解unplugin vue components不能识别组件自动导入类型pnpm

    这篇文章主要为大家介绍了unplugin vue components不能识别组件自动导入类型pnpm详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论