BUG fix: username

src/views/kungalgamer/KUNGalgamer.vue

@@ -8,25 +8,25 @@ import { useRoute } from 'vue-router'
 import { UserInfo } from '@/api'
 
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+import { storeToRefs } from 'pinia'
 
-// Get the current user's UID from the route parameters
 const uid = computed(() => {
   return parseInt(useRoute().params.uid as string)
 })
 const user = ref<UserInfo>()
+const { name, moemoepoint } = storeToRefs(useKUNGalgameUserStore())
 
-// Fetch current user information
 const getUser = async (uid: number) => {
   const userInfo = await useKUNGalgameUserStore().getUser(uid)
   return userInfo.data
 }
 
-// Fetch user information when mounted
 onMounted(async () => {
   user.value = await getUser(uid.value)
 
-  // Update the locally stored latest moemoepoint of the user, as it is not real-time
-  useKUNGalgameUserStore().moemoepoint = user.value.moemoepoint
+  if (user.value.name === name.value) {
+    moemoepoint.value = user.value.moemoepoint
+  }
 })
 </script>
 

src/views/kungalgamer/components/Header.vue

@@ -1,13 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { computed, ref, watch } from 'vue'
-import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
-import { storeToRefs } from 'pinia'
-
-const { name, avatar } = storeToRefs(useKUNGalgameUserStore())
-
-const currentPageUsername = ref(name)
-const currentPageUserAvatar = ref(avatar)
+import { computed } from 'vue'
 
 const props = defineProps<{
   name?: string
@@ -15,22 +8,6 @@ const props = defineProps<{
   moemoepoint?: number
 }>()
 
-watch(
-  () => props.name,
-  () => {
-    // Users without avatars
-    if (props.name) {
-      currentPageUsername.value = props.name
-      currentPageUserAvatar.value = ''
-    }
-    // Users with avatars
-    if (props.name && props.avatar) {
-      currentPageUsername.value = props.name
-      currentPageUserAvatar.value = props.avatar
-    }
-  }
-)
-
 const mpWidth = computed(() => {
   return props.moemoepoint ? `${props.moemoepoint % 100}%` : '0%'
 })
@@ -40,13 +17,13 @@ const mpWidth = computed(() => {
   <!-- Page header -->
   <div class="header">
     <!-- User avatar -->
-    <div class="avatar">
-      <img v-if="avatar" :src="avatar" :alt="name" />
+    <div class="avatar" v-if="props.avatar">
+      <img :src="props.avatar" :alt="props.name" />
     </div>
 
     <!-- Username -->
     <div class="name">
-      <span>{{ name }}</span>
+      <span>{{ props.name }}</span>
       <span>KUNGalgame</span>
     </div>
 

src/views/kungalgamer/content/Settings.vue

@@ -45,10 +45,8 @@ onMounted(() => {
 
 <template>
   <div class="settings">
-    <!-- Change profile picture -->
     <Avatar />
 
-    <!-- Change bio -->
     <div class="bio">
       <div class="title">{{ $tm('user.settings.bio') }}</div>
       <textarea