Clean up avatarHistory

src/stores/avatar.js

@@ -1,4 +1,4 @@
-import { nextTick, reactive, ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 
@@ -59,8 +59,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
         cachePath: '',
         fileAnalysis: []
     });
-    const avatarHistory = reactive(new Set());
+    const avatarHistory = ref([]);
-    const avatarHistoryArray = ref([]);
 
     watch(
         () => watchState.isLoggedIn,
@@ -69,8 +68,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
             cachedAvatars.clear();
             cachedAvatarNames.clear();
             cachedAvatarModerations.clear();
-            avatarHistory.clear();
+            avatarHistory.value = [];
-            avatarHistoryArray.value = [];
             if (isLoggedIn) {
                 getAvatarHistory();
             }
@@ -339,7 +337,6 @@ export const useAvatarStore = defineStore('Avatar', () => {
      * @returns {Promise<void>}
      */
     async function getAvatarHistory() {
-        avatarHistory.clear();
         const historyArray = await database.getAvatarHistory(
             userStore.currentUser.id
         );
@@ -349,9 +346,8 @@ export const useAvatarStore = defineStore('Avatar', () => {
                 continue;
             }
             applyAvatar(avatar);
-            avatarHistory.add(avatar.id);
         }
-        avatarHistoryArray.value = historyArray;
+        avatarHistory.value = historyArray;
     }
 
     /**
@@ -370,16 +366,14 @@ export const useAvatarStore = defineStore('Avatar', () => {
                     return;
                 }
 
-                const historyArray = avatarHistoryArray.value;
+                const historyArray = avatarHistory.value;
                 for (let i = 0; i < historyArray.length; ++i) {
                     if (historyArray[i].id === ref.id) {
                         historyArray.splice(i, 1);
                     }
                 }
 
-                avatarHistoryArray.value.unshift(ref);
+                avatarHistory.value.unshift(ref);
-                avatarHistory.delete(ref.id);
-                avatarHistory.add(ref.id);
             })
             .catch((err) => {
                 console.error('Failed to add avatar to history:', err);
@@ -387,8 +381,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
     }
 
     function clearAvatarHistory() {
-        avatarHistory.clear();
+        avatarHistory.value = [];
-        avatarHistoryArray.value = [];
         database.clearAvatarHistory();
     }
 
@@ -675,7 +668,6 @@ export const useAvatarStore = defineStore('Avatar', () => {
     return {
         avatarDialog,
         avatarHistory,
-        avatarHistoryArray,
         cachedAvatarModerations,
         cachedAvatars,
         cachedAvatarNames,

src/stores/favorite.js

@@ -1151,7 +1151,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
                 }
             }
             if (!avatarInFavorites) {
-                if (!avatarStore.avatarHistory.has(id)) {
+                if (!avatarStore.avatarHistory.includes(id)) {
                     database.removeAvatarFromCache(id);
                 }
             }
@@ -1292,7 +1292,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             }
         }
         if (!avatarInFavorites) {
-            if (!avatarStore.avatarHistory.has(avatarId)) {
+            if (!avatarStore.avatarHistory.includes(avatarId)) {
                 database.removeAvatarFromCache(avatarId);
             }
         }

src/stores/index.js

@@ -82,6 +82,11 @@ pinia.use(
                 ...state.Group,
                 groupInstances: null,
                 inGameGroupOrder: null
+            },
+            Avatar: {
+                // @ts-ignore
+                ...state.Avatar,
+                avatarHistory: null
             }
         })
     })

src/stores/vrcx.js

@@ -274,7 +274,7 @@ export const useVrcxStore = defineStore('Vrcx', () => {
                 !favoriteStore.cachedFavoritesByObjectId(id) &&
                 ref.authorId !== userStore.currentUser.id &&
                 !favoriteStore.localAvatarFavoritesList.includes(id) &&
-                !avatarStore.avatarHistory.has(id)
+                !avatarStore.avatarHistory.includes(id)
             ) {
                 avatarStore.cachedAvatars.delete(id);
             }

src/views/Favorites/components/FavoritesAvatarTab.vue

@@ -109,7 +109,7 @@
                 <template #title>
                     <span style="font-weight: bold; font-size: 14px; margin-left: 10px">Local History</span>
                     <span style="color: #909399; font-size: 12px; margin-left: 10px"
-                        >{{ avatarHistoryArray.length }}/100</span
+                        >{{ avatarHistory.length }}/100</span
                     >
                     <el-tooltip placement="right" content="Clear" :teleported="false">
                         <el-button
@@ -120,9 +120,9 @@
                             @click.stop="promptClearAvatarHistory"></el-button>
                     </el-tooltip>
                 </template>
-                <div v-if="avatarHistoryArray.length" class="x-friend-list" style="margin-top: 10px">
+                <div v-if="avatarHistory.length" class="x-friend-list" style="margin-top: 10px">
                     <FavoritesAvatarLocalHistoryItem
-                        v-for="favorite in avatarHistoryArray"
+                        v-for="favorite in avatarHistory"
                         :key="favorite.id"
                         style="display: inline-block; width: 300px; margin-right: 15px"
                         :favorite="favorite"
@@ -239,7 +239,7 @@
         localAvatarFavoritesList,
         localAvatarFavoriteGroups
     } = useFavoriteStore();
-    const { avatarHistoryArray } = storeToRefs(useAvatarStore());
+    const { avatarHistory } = storeToRefs(useAvatarStore());
     const { promptClearAvatarHistory, showAvatarDialog, applyAvatar } = useAvatarStore();
     const { isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
     const { t } = useI18n();