vue3中js自定义hoos返回值结构赋值

在 Vue 3 中，如果你想要从 JavaScript 自定义 hook 中返回一个复杂的值（比如一个对象或数组），并将其作为组件状态的一部分进行管理和更新，你可以这样做：

首先，你需要创建一个自定义 hook，通常会使用 `defineAsyncState` 或 `reactive` 从 `vue-router` 或其他来源获取数据，如果需要异步加载。

import { defineAsyncState } from 'vue'

// 假设你有一个 API 获取用户的详细信息
const getUserDetails = async () => {
  const response = await fetch('https://api.example.com/user');
  return await response.json();
}

export default function useUserDetails() {
  // 使用 defineAsyncState 来声明一个异步的响应式状态
  const user = defineAsyncState(() => getUserDetails(), (data) => data.user); // 假设API返回的是 { user }
  return { user };
}

然后，在你的组件中，导入这个自定义 hook 并将返回的对象赋值给组件的属性：

import { ref, computed } from 'vue'
import useUserDetails from './hooks/useUserDetails'

export default {
  setup() {
    const { user } = useUserDetails();

    // 将获取到的数据绑定到组件内的 reactive 变量上
    const userName = ref(user.name);

    // 如果有其他需要处理的地方，可以使用 computed 计算属性
    const fullName = computed(() => `${user.name} ${user.surname}`);

    return {
      userName,
      fullName
    }
  },
}

每次 `getUserDetails` 调用成功并更新了 `user` 的值，Vue 的响应式系统会自动追踪这些变化，并更新 `userName` 和 `fullName`。