uniIM/components/UserNameTag.vue

<template>
  <text>{{ username }}</text>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useUserStore} from "@/store/userStore";
import UserApi from "@/api/UserApi";

const username = ref("");
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});
const userStore = useUserStore();
const user = userStore.getMapUser(props.id);
user
  ? (username.value = user.name)
  : UserApi.getUser(props.id).then((res) => {
      username.value = res?.data?.name;
      userStore.setUser(res?.data)
    });
</script>

<style scoped></style>