Store list of local mods with updates on VueX

For a profile with 109 mods and 40 updateable mods, calling
DownloadProvider's getLatestOfAllToUpdate takes a second or two.

- When entering local mod list, it gets called twice: once to show the
  banner about available updates, and once by DownloadModModal
- While in settings view once per second due to setInterval in
  SettingsItem (that might also be something to look into)
- Ridiculous number of times when the mods were updated via
  DownloadModModal. The update time for the example profile went from
  315 seconds to 65 seconds (all downloads were cached both times)

Calling the method in VueX getter caches the value for subsequent
calls, reducing the duration to milliseconds.

src/components/settings-components/SettingsView.vue

@@ -247,7 +247,7 @@ import UtilityMixin from '../mixins/UtilityMixin.vue';
                 'Update all mods',
                 'Quickly update every installed mod to their latest versions.',
                 async () => {
-                    const outdatedMods = ThunderstoreDownloaderProvider.instance.getLatestOfAllToUpdate(this.localModList, this.$store.state.thunderstoreModList);
+                    const outdatedMods = this.$store.getters.localModsWithUpdates;
                     if (outdatedMods.length === 1) {
                         return "1 mod has an update available";
                     }
@@ -412,6 +412,5 @@ import UtilityMixin from '../mixins/UtilityMixin.vue';
         doesLogFileExist() {
             return this.logOutput.exists ? 'Log file exists' : 'Log file does not exist';
         }
-
     }
 </script>

src/components/views/DownloadModModal.vue

@@ -81,7 +81,7 @@
                         <p>The following mods will be downloaded and installed:</p>
                         <br/>
                         <ul class="list">
-                            <li class="list-item" v-for='(key, index) in getListOfModsToUpdate()'
+                            <li class="list-item" v-for='(key, index) in $store.getters.localModsWithUpdates'
                                 :key='`to-update-${index}-${key.getVersion().getFullName()}`'>
                                 {{key.getVersion().getName()}} will be updated to: {{key.getVersion().getVersionNumber().toString()}}
                             </li>
@@ -205,10 +205,6 @@ let assignId = 0;
             return this.$store.state.thunderstoreModList || [];
         }
 
-        get localModList(): ManifestV2[] {
-            return this.$store.state.localModList || [];
-        }
-
         @Watch('$store.state.modals.downloadModModalMod')
         async getModVersions() {
             this.currentVersion = null;
@@ -375,10 +371,6 @@ let assignId = 0;
             }, 1);
         }
 
-        getListOfModsToUpdate(): ThunderstoreCombo[] {
-            return ThunderstoreDownloaderProvider.instance.getLatestOfAllToUpdate(this.localModList, this.thunderstorePackages);
-        }
-
         static async installModAfterDownload(profile: Profile, mod: ThunderstoreMod, version: ThunderstoreVersion): Promise<R2Error | void> {
             return new Promise(async (resolve, reject) => {
                 const manifestMod: ManifestV2 = new ManifestV2().fromThunderstoreMod(mod, version);

src/components/views/InstalledModView.vue

@@ -60,10 +60,7 @@ export default class InstalledModView extends Vue {
     }
 
     get numberOfModsWithUpdates(): number {
-        return ThunderstoreDownloaderProvider.instance.getLatestOfAllToUpdate(
-            this.$store.state.localModList,
-            this.$store.state.thunderstoreModList
-        ).length;
+        return this.$store.getters.localModsWithUpdates.length;
     }
 };
 </script>

src/store/index.ts

@@ -6,6 +6,7 @@ import ModFilterModule from './modules/ModFilterModule';
 import { FolderMigration } from '../migrations/FolderMigration';
 import ManifestV2 from '../model/ManifestV2';
 import ThunderstoreMod from '../model/ThunderstoreMod';
+import ThunderstoreDownloaderProvider from "../providers/ror2/downloading/ThunderstoreDownloaderProvider";
 import ThunderstorePackages from '../r2mm/data/ThunderstorePackages';
 
 Vue.use(Vuex);
@@ -83,6 +84,14 @@ export const store = {
             state.deprecatedMods = ThunderstorePackages.getDeprecatedPackageMap();
         }
     },
+    getters: {
+        localModsWithUpdates(state: State) {
+            return ThunderstoreDownloaderProvider.instance.getLatestOfAllToUpdate(
+                state.localModList,
+                state.thunderstoreModList
+            );
+        }
+    },
     modules: {
         modals: ModalsModule,
         modFilters: ModFilterModule,