use computed to extract data

src/components/dialogs/ChooseFavoriteGroupDialog.vue

@@ -76,14 +76,8 @@
     const { t } = useI18n();
 
     const favoriteStore = useFavoriteStore();
-    const {
+    const { favoriteFriendGroups, favoriteAvatarGroups, favoriteWorldGroups, favoriteDialog } =
-        favoriteFriendGroups,
+        storeToRefs(favoriteStore);
-        favoriteAvatarGroups,
-        favoriteWorldGroups,
-        localAvatarFavoriteGroups,
-        favoriteDialog,
-        localWorldFavoriteGroups
-    } = storeToRefs(favoriteStore);
     const {
         localWorldFavGroupLength,
         addLocalWorldFavorite,
@@ -93,7 +87,9 @@
         localAvatarFavGroupLength,
         removeLocalAvatarFavorite,
         removeLocalWorldFavorite,
-        deleteFavoriteNoConfirm
+        deleteFavoriteNoConfirm,
+        localWorldFavoriteGroups,
+        localAvatarFavoriteGroups
     } = favoriteStore;
     const { isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
 

src/stores/favorite.js

@@ -37,7 +37,25 @@ export const useFavoriteStore = defineStore('Favorite', () => {
     const currentFavoriteTab = ref('friend');
 
     const cachedFavoriteGroups = ref(new Map());
-    const cachedFavoriteGroupsByTypeName = ref(new Map());
+
+    const cachedFavoriteGroupsByTypeName = computed(() => {
+        const group = {};
+
+        for (const k in favoriteFriendGroups.value) {
+            const element = favoriteFriendGroups.value[k];
+            group[element.key] = element;
+        }
+        for (const k in favoriteWorldGroups.value) {
+            const element = favoriteWorldGroups.value[k];
+            group[element.key] = element;
+        }
+        for (const k in favoriteAvatarGroups.value) {
+            const element = favoriteAvatarGroups.value[k];
+            group[element.key] = element;
+        }
+
+        return group;
+    });
 
     const favoriteFriends = computed(() => {
         if (appearanceSettingsStore.sortFavorites) {
@@ -104,10 +122,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
 
     const localAvatarFavorites = ref({});
 
-    const localAvatarFavoritesList = ref([]);
-
-    const localAvatarFavoriteGroups = ref([]);
-
     const favoriteDialog = ref({
         visible: false,
         loading: false,
@@ -116,11 +130,27 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         currentGroup: {}
     });
 
-    const localWorldFavoritesList = ref([]);
-
     const cachedFavoritesByObjectId = ref(new Map());
 
-    const localWorldFavoriteGroups = ref([]);
+    const localAvatarFavoriteGroups = computed(() =>
+        Object.keys(localAvatarFavorites.value).sort()
+    );
+
+    const localWorldFavoriteGroups = computed(() =>
+        Object.keys(localWorldFavorites.value).sort()
+    );
+
+    const localWorldFavoritesList = computed(() =>
+        Object.values(localWorldFavorites.value)
+            .flat()
+            .map((fav) => fav.id)
+    );
+
+    const localAvatarFavoritesList = computed(() =>
+        Object.values(localAvatarFavorites.value)
+            .flat()
+            .map((fav) => fav.id)
+    );
 
     const groupedByGroupKeyFavoriteFriends = computed(() => {
         const groupedByGroupKeyFavoriteFriends = {};
@@ -158,7 +188,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             cachedFavorites.clear();
             cachedFavoritesByObjectId.value.clear();
             cachedFavoriteGroups.value.clear();
-            cachedFavoriteGroupsByTypeName.value.clear();
             favoriteFriendGroups.value = [];
             favoriteWorldGroups.value = [];
             favoriteAvatarGroups.value = [];
@@ -168,8 +197,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             state.favoriteFriends_ = [];
             state.favoriteWorlds_ = [];
             state.favoriteAvatars_ = [];
-            localAvatarFavoriteGroups.value = [];
-            localAvatarFavoritesList.value = [];
             localAvatarFavorites.value = {};
             favoriteDialog.value.visible = false;
             worldImportDialogVisible.value = false;
@@ -659,17 +686,12 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             }
         }
         // update favorites
-        cachedFavoriteGroupsByTypeName.value.clear();
+
-        for (const type in types) {
-            for (group of types[type]) {
-                cachedFavoriteGroupsByTypeName.value.set(group.key, group);
-            }
-        }
         for (ref of cachedFavorites.values()) {
             if (ref.$isDeleted) {
                 continue;
             }
-            group = cachedFavoriteGroupsByTypeName.value.get(ref.$groupKey);
+            group = cachedFavoriteGroupsByTypeName.value[ref.$groupKey];
             if (typeof group === 'undefined') {
                 continue;
             }
@@ -696,7 +718,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             console.error(err);
         }
         expireFavorites();
-        cachedFavoriteGroupsByTypeName.value.clear();
         processBulk({
             fn: favoriteRequest.getFavorites,
             N: -1,
@@ -798,9 +819,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         ref.$groupKey = `${ref.type}:${String(ref.tags[0])}`;
 
         if (ref.$isDeleted === false) {
-            const group = cachedFavoriteGroupsByTypeName.value.get(
+            const group = cachedFavoriteGroupsByTypeName.value[ref.$groupKey];
-                ref.$groupKey
-            );
             if (typeof group !== 'undefined') {
                 ++group.count;
             }
@@ -934,15 +953,10 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         if (typeof ref === 'undefined') {
             return;
         }
-        if (!localWorldFavoritesList.value.includes(worldId)) {
-            localWorldFavoritesList.value.push(worldId);
-        }
         if (!localWorldFavorites.value[group]) {
             localWorldFavorites.value[group] = [];
         }
-        if (!localWorldFavoriteGroups.value.includes(group)) {
+
-            localWorldFavoriteGroups.value.push(group);
-        }
         localWorldFavorites.value[group].unshift(ref);
         database.addWorldToCache(ref);
         database.addWorldToFavorites(worldId, group);
@@ -995,15 +1009,9 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         if (typeof ref === 'undefined') {
             return;
         }
-        if (!localAvatarFavoritesList.value.includes(avatarId)) {
-            localAvatarFavoritesList.value.push(avatarId);
-        }
         if (!localAvatarFavorites.value[group]) {
             localAvatarFavorites.value[group] = [];
         }
-        if (!localAvatarFavoriteGroups.value.includes(group)) {
-            localAvatarFavoriteGroups.value.push(group);
-        }
         localAvatarFavorites.value[group].unshift(ref);
         database.addAvatarToCache(ref);
         database.addAvatarToFavorites(avatarId, group);
@@ -1086,7 +1094,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             avatarIdRemoveList.add(favoriteGroup[i].id);
         }
 
-        removeFromArray(localAvatarFavoriteGroups.value, group);
         delete localAvatarFavorites.value[group];
         database.deleteAvatarFavoriteGroup(group);
 
@@ -1137,7 +1144,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
                 }
             }
             if (!avatarInFavorites) {
-                removeFromArray(localAvatarFavoritesList.value, id);
                 if (!avatarStore.avatarHistory.has(id)) {
                     database.removeAvatarFromCache(id);
                 }
@@ -1146,7 +1152,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
     }
 
     function sortLocalAvatarFavorites() {
-        localAvatarFavoriteGroups.value.sort();
         if (!appearanceSettingsStore.sortFavorites) {
             for (let i = 0; i < localAvatarFavoriteGroups.value.length; ++i) {
                 const group = localAvatarFavoriteGroups.value[i];
@@ -1172,10 +1177,8 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             });
             return;
         }
-        localAvatarFavoriteGroups.value.push(newName);
         localAvatarFavorites.value[newName] = localAvatarFavorites.value[group];
 
-        removeFromArray(localAvatarFavoriteGroups.value, group);
         delete localAvatarFavorites.value[group];
         database.renameAvatarFavoriteGroup(newName, group);
         sortLocalAvatarFavorites();
@@ -1198,9 +1201,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         if (!localAvatarFavorites.value[group]) {
             localAvatarFavorites.value[group] = [];
         }
-        if (!localAvatarFavoriteGroups.value.includes(group)) {
-            localAvatarFavoriteGroups.value.push(group);
-        }
         sortLocalAvatarFavorites();
     }
 
@@ -1246,8 +1246,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             groupsArr = ['Favorites'];
         }
 
-        localAvatarFavoriteGroups.value = groupsArr;
-        localAvatarFavoritesList.value = Array.from(localListSet);
         localAvatarFavorites.value = localFavorites;
 
         sortLocalAvatarFavorites();
@@ -1287,7 +1285,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             }
         }
         if (!avatarInFavorites) {
-            removeFromArray(localAvatarFavoritesList.value, avatarId);
             if (!avatarStore.avatarHistory.has(avatarId)) {
                 database.removeAvatarFromCache(avatarId);
             }
@@ -1324,7 +1321,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             worldIdRemoveList.add(favoriteGroup[i].id);
         }
 
-        removeFromArray(localWorldFavoriteGroups.value, group);
         delete localWorldFavorites.value[group];
         database.deleteWorldFavoriteGroup(group);
 
@@ -1347,13 +1343,11 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         }
 
         worldIdRemoveList.forEach((id) => {
-            removeFromArray(localWorldFavoritesList.value, id);
             database.removeWorldFromCache(id);
         });
     }
 
     function sortLocalWorldFavorites() {
-        localWorldFavoriteGroups.value.sort();
         if (!appearanceSettingsStore.sortFavorites) {
             for (let i = 0; i < localWorldFavoriteGroups.value.length; ++i) {
                 const group = localWorldFavoriteGroups.value[i];
@@ -1379,10 +1373,8 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             });
             return;
         }
-        localWorldFavoriteGroups.value.push(newName);
         localWorldFavorites.value[newName] = localWorldFavorites.value[group];
 
-        removeFromArray(localWorldFavoriteGroups.value, group);
         delete localWorldFavorites.value[group];
         database.renameWorldFavoriteGroup(newName, group);
         sortLocalWorldFavorites();
@@ -1422,7 +1414,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             }
         }
         if (!worldInFavorites) {
-            removeFromArray(localWorldFavoritesList.value, worldId);
             database.removeWorldFromCache(worldId);
         }
         database.removeWorldFromFavorites(worldId, group);
@@ -1486,8 +1477,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             groupsArr = ['Favorites'];
         }
 
-        localWorldFavoriteGroups.value = groupsArr;
-        localWorldFavoritesList.value = Array.from(localListSet);
         localWorldFavorites.value = localFavorites;
 
         sortLocalWorldFavorites();
@@ -1587,6 +1576,8 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         localWorldFavoriteGroups,
         groupedByGroupKeyFavoriteFriends,
         currentFavoriteTab,
+        localWorldFavGroupLength,
+        localAvatarFavGroupLength,
 
         initFavorites,
         applyFavorite,
@@ -1598,12 +1589,10 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         showWorldImportDialog,
         showAvatarImportDialog,
         showFriendImportDialog,
-        localWorldFavGroupLength,
         addLocalWorldFavorite,
         hasLocalWorldFavorite,
         hasLocalAvatarFavorite,
         addLocalAvatarFavorite,
-        localAvatarFavGroupLength,
         updateFavoriteDialog,
         deleteLocalAvatarFavoriteGroup,
         renameLocalAvatarFavoriteGroup,

src/views/Favorites/components/FavoritesAvatarTab.vue

@@ -244,19 +244,15 @@
 
     const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
     const { setSortFavorites } = useAppearanceSettingsStore();
-    const {
+    const { favoriteAvatars, favoriteAvatarGroups, localAvatarFavorites } = storeToRefs(useFavoriteStore());
-        favoriteAvatars,
-        favoriteAvatarGroups,
-        localAvatarFavorites,
-        localAvatarFavoriteGroups,
-        localAvatarFavoritesList
-    } = storeToRefs(useFavoriteStore());
     const {
         showAvatarImportDialog,
         localAvatarFavGroupLength,
         deleteLocalAvatarFavoriteGroup,
         renameLocalAvatarFavoriteGroup,
-        newLocalAvatarFavoriteGroup
+        newLocalAvatarFavoriteGroup,
+        localAvatarFavoritesList,
+        localAvatarFavoriteGroups
     } = useFavoriteStore();
     const { avatarHistoryArray } = storeToRefs(useAvatarStore());
     const { promptClearAvatarHistory, showAvatarDialog, applyAvatar } = useAvatarStore();
@@ -302,8 +298,8 @@
         }
 
         const results = [];
-        for (let i = 0; i < localAvatarFavoriteGroups.value.length; ++i) {
+        for (let i = 0; i < localAvatarFavoriteGroups.length; ++i) {
-            const group = localAvatarFavoriteGroups.value[i];
+            const group = localAvatarFavoriteGroups[i];
             if (!localAvatarFavorites.value[group]) {
                 continue;
             }
@@ -436,7 +432,7 @@
         };
         refreshCancelToken.value = token;
         try {
-            for (const avatarId of localAvatarFavoritesList.value) {
+            for (const avatarId of localAvatarFavoritesList) {
                 if (token.cancelled) {
                     break;
                 }

src/views/Favorites/components/FavoritesWorldTab.vue

@@ -245,13 +245,7 @@
     const { t } = useI18n();
     const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
     const { setSortFavorites } = useAppearanceSettingsStore();
-    const {
+    const { favoriteWorlds, favoriteWorldGroups, localWorldFavorites } = storeToRefs(useFavoriteStore());
-        favoriteWorlds,
-        favoriteWorldGroups,
-        localWorldFavorites,
-        localWorldFavoriteGroups,
-        localWorldFavoritesList
-    } = storeToRefs(useFavoriteStore());
     const {
         showWorldImportDialog,
         localWorldFavGroupLength,
@@ -259,7 +253,9 @@
         renameLocalWorldFavoriteGroup,
         removeLocalWorldFavorite,
         newLocalWorldFavoriteGroup,
-        handleFavoriteGroup
+        handleFavoriteGroup,
+        localWorldFavoritesList,
+        localWorldFavoriteGroups
     } = useFavoriteStore();
     const { showWorldDialog } = useWorldStore();
 
@@ -440,8 +436,8 @@
         }
 
         const results = [];
-        for (let i = 0; i < localWorldFavoriteGroups.value.length; ++i) {
+        for (let i = 0; i < localWorldFavoriteGroups.length; ++i) {
-            const group = localWorldFavoriteGroups.value[i];
+            const group = localWorldFavoriteGroups[i];
             if (!localWorldFavorites.value[group]) {
                 continue;
             }
@@ -498,7 +494,7 @@
         };
         refreshCancelToken.value = token;
         try {
-            for (const worldId of localWorldFavoritesList.value) {
+            for (const worldId of localWorldFavoritesList) {
                 if (token.cancelled) {
                     break;
                 }

src/views/Favorites/dialogs/AvatarExportDialog.vue

@@ -102,14 +102,8 @@
     const emit = defineEmits(['update:avatarExportDialogVisible']);
 
     const favoriteStore = useFavoriteStore();
-    const {
+    const { favoriteAvatars, favoriteAvatarGroups, localAvatarFavorites } = storeToRefs(favoriteStore);
-        favoriteAvatars,
+    const { localAvatarFavGroupLength, localAvatarFavoritesList, localAvatarFavoriteGroups } = favoriteStore;
-        favoriteAvatarGroups,
-        localAvatarFavorites,
-        localAvatarFavoritesList,
-        localAvatarFavoriteGroups
-    } = storeToRefs(favoriteStore);
-    const { localAvatarFavGroupLength } = favoriteStore;
     const { cachedAvatars } = useAvatarStore();
 
     const avatarExportContent = ref('');
@@ -213,8 +207,8 @@
             favoriteAvatars.value.forEach((ref) => {
                 lines.push(resText(ref.ref));
             });
-            for (let i = 0; i < localAvatarFavoritesList.value.length; ++i) {
+            for (let i = 0; i < localAvatarFavoritesList.length; ++i) {
-                const avatarId = localAvatarFavoritesList.value[i];
+                const avatarId = localAvatarFavoritesList[i];
                 const ref = cachedAvatars.get(avatarId);
                 if (typeof ref !== 'undefined') {
                     lines.push(resText(ref));

src/views/Favorites/dialogs/AvatarImportDialog.vue

@@ -190,9 +190,9 @@
     const emit = defineEmits(['update:avatarImportDialogInput']);
     const { t } = useI18n();
     const { showUserDialog } = useUserStore();
-    const { favoriteAvatarGroups, avatarImportDialogInput, avatarImportDialogVisible, localAvatarFavoriteGroups } =
+    const { favoriteAvatarGroups, avatarImportDialogInput, avatarImportDialogVisible } =
         storeToRefs(useFavoriteStore());
-    const { addLocalAvatarFavorite, localAvatarFavGroupLength } = useFavoriteStore();
+    const { addLocalAvatarFavorite, localAvatarFavGroupLength, localAvatarFavoriteGroups } = useFavoriteStore();
     const { showAvatarDialog, applyAvatar } = useAvatarStore();
     const { showFullscreenImageDialog } = useGalleryStore();
 

src/views/Favorites/dialogs/WorldExportDialog.vue

@@ -100,14 +100,8 @@
     const { t } = useI18n();
 
     const favoriteStore = useFavoriteStore();
-    const {
+    const { favoriteWorlds, favoriteWorldGroups, localWorldFavorites } = storeToRefs(favoriteStore);
-        favoriteWorlds,
+    const { localWorldFavGroupLength, localWorldFavoritesList, localWorldFavoriteGroups } = favoriteStore;
-        favoriteWorldGroups,
-        localWorldFavorites,
-        localWorldFavoriteGroups,
-        localWorldFavoritesList
-    } = storeToRefs(favoriteStore);
-    const { localWorldFavGroupLength } = favoriteStore;
     const { cachedWorlds } = useWorldStore();
 
     const worldExportContent = ref('');
@@ -215,8 +209,8 @@
             favoriteWorlds.value.forEach((ref) => {
                 lines.push(resText(ref.ref));
             });
-            for (let i = 0; i < localWorldFavoritesList.value.length; ++i) {
+            for (let i = 0; i < localWorldFavoritesList.length; ++i) {
-                const worldId = localWorldFavoritesList.value[i];
+                const worldId = localWorldFavoritesList[i];
                 const ref = cachedWorlds.get(worldId);
                 if (typeof ref !== 'undefined') {
                     lines.push(resText(ref));

src/views/Favorites/dialogs/WorldImportDialog.vue

@@ -184,9 +184,8 @@
     import { removeFromArray } from '../../../shared/utils';
 
     const { showUserDialog } = useUserStore();
-    const { favoriteWorldGroups, worldImportDialogInput, worldImportDialogVisible, localWorldFavoriteGroups } =
+    const { favoriteWorldGroups, worldImportDialogInput, worldImportDialogVisible } = storeToRefs(useFavoriteStore());
-        storeToRefs(useFavoriteStore());
+    const { localWorldFavGroupLength, addLocalWorldFavorite, localWorldFavoriteGroups } = useFavoriteStore();
-    const { localWorldFavGroupLength, addLocalWorldFavorite } = useFavoriteStore();
     const { showWorldDialog } = useWorldStore();
     const { showFullscreenImageDialog } = useGalleryStore();