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問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
遇到問題
最近寫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之前調(diào)用了store.dispatch('initMenus') 內(nèi)部包含async/await
解決方法
If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
只要把代碼順序調(diào)整如下，報錯即可消失：
<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解決的詳細(xì)內(nèi)容，更多關(guān)于vue3 ts組合式API異常的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了封裝一下vue中的axios，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
vue3實(shí)現(xiàn)圖片瀑布流展示效果實(shí)例代碼
這篇文章主要介紹了vue3實(shí)現(xiàn)圖片瀑布流展示效果的相關(guān)資料,該組件可以調(diào)整列數(shù)、支持懶加載、自定義每頁滾動數(shù)量、高度和點(diǎn)擊效果,作者展示了組件的效果,并詳細(xì)說明了實(shí)現(xiàn)方法,包括組件的創(chuàng)建和依賴的工具庫,需要的朋友可以參考下2024-11-11
elementui實(shí)現(xiàn)預(yù)覽圖片組件二次封裝
這篇文章主要介紹了elementui實(shí)現(xiàn)預(yù)覽圖片組件二次封裝的方法 ，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
使用el-form-item設(shè)置標(biāo)簽長度
這篇文章主要介紹了使用el-form-item設(shè)置標(biāo)簽長度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue中的ref和$refs的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Vue echarts模擬后端數(shù)據(jù)流程詳解
在平常的項目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動態(tài)的進(jìn)行呈現(xiàn),接下來我們就模擬從后端獲取數(shù)據(jù)然后進(jìn)行呈現(xiàn)的方法2022-09-09
詳解Element-ui NavMenu子菜單使用遞歸生成時使用報錯
這篇文章主要介紹了詳解Element-ui NavMenu子菜單使用遞歸生成時使用報錯，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Elementui具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件全過程(WEB)
寫頁面的時候都會用到一些導(dǎo)航欄、點(diǎn)擊不同的部分切換不同的頁面,下面這篇文章主要給大家介紹了關(guān)于Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件的相關(guān)資料,需要的朋友可以參考下2023-06-06
Element UI是一套基于Vue的桌面端組件庫,封裝好了很多常用的UI組件,下面這篇文章主要給大家介紹了關(guān)于vue中elementUI里面一些插件的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06