updated InfoModal.vue + infoState.ts

src/components/InfoModal.vue

@@ -27,37 +27,35 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { useStore } from "vuex";
 import { onMounted, reactive } from "vue";
+import type { infoState } from "@/stores/infoState";
+import { useInfoStateStore } from "@/stores/infoState";
+
+const infoStateStore = useInfoStateStore();
 
-export default {
-  name: "InfoModal",
-  setup() {
-    const store = useStore();
 const infos = reactive({
-      data: [],
+  data: [] as infoState[],
+  count: 0,
 });
 
-    const closeModal = (id) => {
+const closeModal = (id: number) => {
-      store.commit("removeInfoState", id);
+  infoStateStore.removeInfo(id);
 };
 
 onMounted(() => {
-      store.subscribe((mutation, state) => {
+  infos.count = infoStateStore.infoCount;
-        if (mutation.type === "changeInfoState") {
+
-          infos.data = state.info;
+  infoStateStore.$subscribe((mutation, state) => {
+    if (state.infoCount !== infos.count) {
+      infos.data = state.infoState;
 
       setTimeout(() => {
-            closeModal(store.state.info.length - 1);
+        closeModal(infoStateStore.infoState.length - 1);
       }, 5000);
     }
   });
 });
-
-    return { infos, closeModal };
-  },
-};
 </script>
 
 <style lang="scss" scoped>

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: {},