onMounted 当没有要关联的活动组件实例时调用

Question

Symfony/VueJS 组件

// IMPORTS
import getUser from "../hooks/getUser";
import { useRoute } from 'vue-router'

// VARS
const route = useRoute()
const { user } = getUser(1)
const routeId = computed(() => route.params.id)

// WATCH
watch(route,() => {
  getUser(routeId)
})

../hooks/getUser

import { onMounted, ref }   from "vue"
import axios                from "axios"

export default function getUser(id){
    // VARS
    const user = ref()

    // FUNCTIONS
    const getUser = async() => {
        await axios
            .get(`https://jsonplaceholder.typicode.com/users/${id}`)
            .then(r  => user.value = r.data)
            .catch(e => console.log(e))
    }

    // ON-MOUNTED
    onMounted(() => (id) ? getUser(id) : false )

    // RETURNS
    return { user }
}

大家好，JS，VUE 专业人士， 请帮我解决这个问题。 我收到此错误

[Vue warn]：当没有要关联的活动组件实例时调用 onMounted。生命周期注入 API 只能在 setup() 执行期间使用。如果您使用异步 setup()，请确保在第一个等待语句之前注册生命周期挂钩。

有人可以告诉我我做错了什么吗？

Answer 1

你误用了

onMounted

钩子，当组件挂载到 DOM 时，这个钩子给你一个回调来运行其中的任何代码，它的回调不带任何参数，但它可以是异步的:

import { onMounted, ref }   from "vue"
import axios from "axios"

export default function getUser(id){
    // VARS
    const user = ref()

    // FUNCTIONS
    const getUser = async () => {
        await axios
            .get(`https://jsonplaceholder.typicode.com/users/${id}`)
            .then(r  => user.value = r.data)
            .catch(e => console.log(e))
    }

    // ON-MOUNTED
    onMounted(getUser)

    // or 
    /* onMounted(async ()=> {
        await getUser()
    })*/

    // RETURNS
    return { user }
}