updated DamageSite.vue

src/components/DamageSite.vue

@@ -11,42 +11,35 @@
   </div>
 </template>
 
-<script>
-import HitgroupPuppet from "/src/components/HitgroupPuppet";
-import TotalDamage from "/src/components/TotalDamage";
-import { onMounted, reactive } from "vue";
-import { useStore } from "vuex";
-import { GetWeaponDmg } from "/src/utils";
+<script setup lang="ts">
+import HitgroupPuppet from "@/components/HitgroupPuppet.vue";
+import TotalDamage from "@/components/TotalDamage.vue";
+import { onMounted } from "vue";
+import { GetWeaponDmg } from "@/utils";
+import { useMatchDetailsStore } from "@/stores/matchDetails";
+import type { MatchWeapons } from "@/types";
+import { useInfoStateStore } from "@/stores/infoState";
 
-export default {
-  name: "DamageSite.vue",
-  components: { HitgroupPuppet, TotalDamage },
-  setup() {
-    const store = useStore();
+const data = {} as MatchWeapons;
 
-    const data = reactive({
-      equipment_map: {},
-      stats: [],
-    });
+const matchDetailsStore = useMatchDetailsStore();
+const infoStateStore = useInfoStateStore();
 
-    const getWeaponDamage = async () => {
-      const resData = await GetWeaponDmg(
-        store,
-        store.state.matchDetails.match_id
-      );
-      if (resData !== null) {
-        data.equipment_map = resData.equipment_map;
-        data.stats = resData.stats;
-      }
-    };
+const getWeaponDamage = async () => {
+  const [resData, info] = await GetWeaponDmg(
+    matchDetailsStore.matchDetails.match_id
+  );
 
-    onMounted(() => {
-      getWeaponDamage();
-    });
-
-    return { data };
-  },
+  if (info.message !== "") infoStateStore.addInfo(info);
+  if (resData !== null) {
+    data.equipment_map = resData.equipment_map;
+    data.stats = resData.stats;
+  }
 };
+
+onMounted(() => {
+  getWeaponDamage();
+});
 </script>
 
 <style scoped>