如何在组件挂载时获取Vue Composable中的数据？

核心问题原因 #

报错是因为useFetch返回的初始数据为null，组件挂载时直接访问null.users触发类型错误。只需调整useFetch的初始状态，并在onMounted中手动触发请求，就能既保留Composable的复用性，又不用条件渲染子组件。

修改后的代码示例 #

1. 调整useFetch Composable

import { ref } from 'vue'

export function useFetch(url) {
  // 初始值设为包含空users数组的对象，避免null导致的属性读取错误
  const data = ref({ users: [] })
  const error = ref(null)
  const isLoading = ref(false)

  // 封装手动触发的请求方法
  const fetchData = async () => {
    isLoading.value = true
    try {
      const response = await fetch(url)
      if (!response.ok) throw new Error('请求失败')
      data.value = await response.json()
    } catch (err) {
      error.value = err.message
    } finally {
      isLoading.value = false
    }
  }

  return { data, error, isLoading, fetchData }
}

2. App.vue中在onMounted触发请求

<template>
  <!-- 无需条件渲染，直接传入初始为空数组的users -->
  <Users :users="data.value.users" />
  <!-- 可选：添加加载状态提示 -->
  <p v-if="isLoading">加载中...</p>
  <p v-if="error" class="error">{{ error }}</p>
</template>

<script setup>
import { onMounted } from 'vue'
import { useFetch } from './useFetch'
import Users from './Users.vue'

const { data, error, isLoading, fetchData } = useFetch('https://jsonplaceholder.typicode.com/users')

// 组件挂载后触发数据请求
onMounted(() => {
  fetchData()
})
</script>

3. Users.vue直接渲染数据

<template>
  <ul>
    <!-- 遍历空数组时不会渲染任何元素，也不会报错 -->
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

<script setup>
defineProps(['users'])
</script>

方案说明 #

• 保留Composable复用性：请求逻辑仍封装在useFetch中，可在其他组件直接复用。
• onMounted触发请求：严格遵循“组件挂载时加载数据”的需求，确保时机正确。
• 避免条件渲染：通过给data设置包含空users数组的初始值，保证模板始终能读取到合法的数组，不会因null报错；同时空数组遍历不会生成DOM元素，无需额外条件判断子组件是否渲染。

内容的提问来源于stack exchange，提问作者zichyboy