From 552188c8a9fe3c6f65e6d64074e9ddcccd62a701 Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Fri, 25 Mar 2022 20:32:57 +0100
Subject: [PATCH] updated InfoModal.vue + infoState.ts

---
 src/components/InfoModal.vue | 50 +++++++++++++++++-------------------
 src/stores/infoState.ts      |  4 +++
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/components/InfoModal.vue b/src/components/InfoModal.vue
index 12e5f39..b5bb289 100644
--- a/src/components/InfoModal.vue
+++ b/src/components/InfoModal.vue
@@ -27,37 +27,35 @@
   </div>
 </template>
 
-<script>
-import { useStore } from "vuex";
+<script setup lang="ts">
 import { onMounted, reactive } from "vue";
+import type { infoState } from "@/stores/infoState";
+import { useInfoStateStore } from "@/stores/infoState";
 
-export default {
-  name: "InfoModal",
-  setup() {
-    const store = useStore();
-    const infos = reactive({
-      data: [],
-    });
+const infoStateStore = useInfoStateStore();
 
-    const closeModal = (id) => {
-      store.commit("removeInfoState", id);
-    };
+const infos = reactive({
+  data: [] as infoState[],
+  count: 0,
+});
 
-    onMounted(() => {
-      store.subscribe((mutation, state) => {
-        if (mutation.type === "changeInfoState") {
-          infos.data = state.info;
-
-          setTimeout(() => {
-            closeModal(store.state.info.length - 1);
-          }, 5000);
-        }
-      });
-    });
-
-    return { infos, closeModal };
-  },
+const closeModal = (id: number) => {
+  infoStateStore.removeInfo(id);
 };
+
+onMounted(() => {
+  infos.count = infoStateStore.infoCount;
+
+  infoStateStore.$subscribe((mutation, state) => {
+    if (state.infoCount !== infos.count) {
+      infos.data = state.infoState;
+
+      setTimeout(() => {
+        closeModal(infoStateStore.infoState.length - 1);
+      }, 5000);
+    }
+  });
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/stores/infoState.ts b/src/stores/infoState.ts
index bd3c240..67110e8 100644
--- a/src/stores/infoState.ts
+++ b/src/stores/infoState.ts
@@ -8,6 +8,7 @@ export type infoState = {
 
 export type RootState = {
   infoState: infoState[];
+  infoCount: number;
 };
 
 export const useInfoStateStore = defineStore({
@@ -15,13 +16,16 @@ export const useInfoStateStore = defineStore({
   state: () =>
     ({
       infoState: [],
+      infoCount: 0,
     } as RootState),
   actions: {
     addInfo(payload: infoState) {
       this.infoState.push(payload);
+      this.infoCount += 1;
     },
     removeInfo(id: number) {
       this.infoState.splice(id, 1);
+      this.infoCount -= 1;
     },
   },
   getters: {},