关于vue3:onMounted-is-called-when-there-is-no-active-component-已解决

38次阅读

共计 771 个字符,预计需要花费 2 分钟才能阅读完成。

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

心愿能够帮到你。

正文完
 0