fix: Fix reactivity on route change

For example, browser back/forward didn't restore previous state
yukidaruma · Jan 31, 2021 · 2ee4326 · 2ee4326 · vercel · Jan 31, 2021
1 parent 40cb897
commit 2ee4326
Showing 1 changed file with 47 additions and 33 deletions.
diff --git a/src/views/Records.vue b/src/views/Records.vue
@@ -282,39 +282,7 @@ export default {
     LeagueTeamTypePicker, PlayerLink, PlayerRankingEntry, TabSwitcher, WeaponPicker, MultiWeaponPicker, XRecords,
   },
   created() {
-    const hash = this.$route.hash.replace('#', '');
-
-    if (hash) {
-      const [activeTab, data] = hash.split(';');
-      this.activeTab = activeTab;
-      switch (activeTab) {
-        case 'x-weapons':
-          this.xWeapon.id = Number.parseInt(data.replace('-all', ''), 10);
-          this.xWeapon.allRules = data.includes('-all');
-          this.fetchXWeaponRecords();
-          break;
-        case 'league-weapons': {
-          const [teamType, ...weaponId] = data;
-          this.leagueWeapon.groupType = LeagueTeamTypesTable[teamType];
-          this.leagueWeapon.id = Number.parseInt(weaponId.join('', ''), 10);
-          this.fetchLeagueWeaponRecords();
-          break;
-        }
-        case 'league-weapon-combinations': {
-          const [teamType, ...weaponIds] = data;
-          this.leagueWeapons.groupType = LeagueTeamTypesTable[teamType];
-          this.leagueWeapons.ids = weaponIds.join('').split(',').map((id) => Number.parseInt(id, 10));
-          this.fetchLeagueWeaponRecords(true);
-          break;
-        }
-        case 'league-powers':
-          this.leaguePowersActiveTab = LeagueTeamTypesTable[data];
-          break;
-        default:
-      }
-    }
-
-    this.fetchWeaponsTopPlayers();
+    this.restoreStateByHash();
   },
   data() {
     return {
@@ -380,10 +348,56 @@ export default {
         this.$router.push({ hash: value });
       }
     },
+    '$route.hash'() {
+      this.restoreStateByHash(false);
+    },
   },
   methods: {
     findRuleKey,
     Player,
+    restoreStateByHash(shouldFetch = true) {
+      const hash = this.$route.hash.replace('#', '');
+
+      if (hash) {
+        const [activeTab, data] = hash.split(';');
+        this.activeTab = activeTab;
+        switch (activeTab) {
+          case 'x-weapons':
+            this.xWeapon.id = Number.parseInt(data.replace('-all', ''), 10);
+            this.xWeapon.allRules = data.includes('-all');
+            if (shouldFetch) {
+              this.fetchXWeaponRecords();
+            }
+            break;
+          case 'league-weapons': {
+            const [teamType, ...weaponId] = data;
+            this.leagueWeapon.groupType = LeagueTeamTypesTable[teamType];
+            this.leagueWeapon.id = Number.parseInt(weaponId.join('', ''), 10);
+            if (shouldFetch) {
+              this.fetchLeagueWeaponRecords();
+            }
+            break;
+          }
+          case 'league-weapon-combinations': {
+            const [teamType, ...weaponIds] = data;
+            this.leagueWeapons.groupType = LeagueTeamTypesTable[teamType];
+            this.leagueWeapons.ids = weaponIds.join('').split(',').map((id) => Number.parseInt(id, 10));
+            if (shouldFetch) {
+              this.fetchLeagueWeaponRecords(true);
+            }
+            break;
+          }
+          case 'league-powers':
+            this.leaguePowersActiveTab = LeagueTeamTypesTable[data];
+            break;
+          default:
+        }
+      }
+
+      if (shouldFetch) {
+        this.fetchWeaponsTopPlayers();
+      }
+    },
     leagueId(time) {
       return moment(time).format('YYMMDDHH');
     },