Vue3前端列表怎么获取用户信息

在Vue3中，要从后端获取用户信息并显示在列表中，通常会涉及以下几个步骤：

1. **数据请求**：首先，你需要安装并配置一个HTTP客户端库，如axios、vue-resource或者Vuex ORM提供的axios集成。在组件内部或Vuex store中发起一个GET请求，指定获取用户信息的API路径。

import axios from 'axios';

export const getUserList = async () => {
  try {
    const response = await axios.get('/api/users');
    return response.data; // 返回的数据通常是JSON格式，包含用户信息列表
  } catch (error) {
    console.error('Error fetching users', error);
  }
};

2. **响应处理**：当后端返回用户信息后，在组件的`setup()`或`created()`钩子中调用这个函数，并将结果赋值给组件的状态（比如`store.state.users`）。

3. **模板渲染**：在组件的模板中，你可以使用v-for指令遍历用户信息数组，展示每个用户的属性，如用户名、头像等。

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">
        <h2>{{ user.name }}</h2>
        <img :src="user.avatarUrl" alt="User Avatar"/>
      </li>
    </ul>
  </div>
</template>

<script>
import { computed, ref } from 'vue';
import { getUserList } from '@/store/api'; // 引入API模块

export default {
  setup() {
    const userList = ref([]);
    
    useEffect(() => {
      async function fetchData() {
        const data = await getUserList();
        userList.value = data;
      }
      fetchData(); // 获取数据并在组件挂载后立即执行
    }, [getUserList]);

    return {
      userList,
    };
  },
};
</script>