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中的axios示例代码详解

    封装一下vue中的axios示例代码详解

    这篇文章主要介绍了封装一下vue中的axios,本文通过示例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue3实现图片瀑布流展示效果实例代码

    vue3实现图片瀑布流展示效果实例代码

    这篇文章主要介绍了vue3实现图片瀑布流展示效果的相关资料,该组件可以调整列数、支持懒加载、自定义每页滚动数量、高度和点击效果,作者展示了组件的效果,并详细说明了实现方法,包括组件的创建和依赖的工具库,需要的朋友可以参考下
    2024-11-11
  • elementui实现预览图片组件二次封装

    elementui实现预览图片组件二次封装

    这篇文章主要介绍了elementui实现预览图片组件二次封装的方法 ,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • 使用el-form-item设置标签长度

    使用el-form-item设置标签长度

    这篇文章主要介绍了使用el-form-item设置标签长度方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中的ref和$refs的使用

    vue中的ref和$refs的使用

    这篇文章主要介绍了vue中的ref和$refs的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Vue echarts模拟后端数据流程详解

    Vue echarts模拟后端数据流程详解

    在平常的项目中,echarts图表我们也是使用的非常多的,通常我们从后端拿到数据,需要在图表上动态的进行呈现,接下来我们就模拟从后端获取数据然后进行呈现的方法
    2022-09-09
  • 详解Element-ui NavMenu子菜单使用递归生成时使用报错

    详解Element-ui NavMenu子菜单使用递归生成时使用报错

    这篇文章主要介绍了详解Element-ui NavMenu子菜单使用递归生成时使用报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Elementui按钮设置默认选中状态的实现过程

    Elementui按钮设置默认选中状态的实现过程

    这篇文章主要给大家介绍了关于Elementui按钮设置默认选中状态的实现过程,文中通过图文以及示例代码介绍的非常详细,对大家学习或者使用Elementui具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • Vue3点击侧边导航栏完成切换页面内组件全过程(WEB)

    Vue3点击侧边导航栏完成切换页面内组件全过程(WEB)

    写页面的时候都会用到一些导航栏、点击不同的部分切换不同的页面,下面这篇文章主要给大家介绍了关于Vue3点击侧边导航栏完成切换页面内组件的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue中elementUI里面一些插件的使用

    vue中elementUI里面一些插件的使用

    Element UI是一套基于Vue的桌面端组件库,封装好了很多常用的UI组件,下面这篇文章主要给大家介绍了关于vue中elementUI里面一些插件的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06

最新评论