From 90048d0505d1b15d9fbe9d4cc0eba35adca6ccec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= <imacat@mail.imacat.idv.tw>
Date: Fri, 6 Mar 2026 13:25:00 +0800
Subject: [PATCH] Standardize store exports to named useXxxStore convention

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/AccountMenu/AcctMenu.vue       | 26 ++++++++---------
 src/components/Compare/SidebarStates.vue      |  4 +--
 .../Conformance/ConformanceResults.vue        |  4 +--
 .../Conformance/ConformanceSidebar.vue        | 14 +++++-----
 .../ConformanceSidebar/ActRadio.vue           |  4 +--
 .../ConformanceRadioGroup.vue                 |  4 +--
 .../ConformanceSelectResult.vue               |  4 +--
 .../ConformanceSidebar/ConformanceShowBar.vue |  8 +++---
 .../ConformanceTimeRange.vue                  |  4 +--
 .../Discover/Conformance/MoreModal.vue        |  4 +--
 .../Discover/Map/Filter/Attributes.vue        |  4 +--
 src/components/Discover/Map/Filter/Funnel.vue |  8 +++---
 .../Discover/Map/Filter/Timeframes.vue        |  4 +--
 src/components/Discover/Map/Filter/Trace.vue  |  8 +++---
 src/components/Discover/Map/SidebarFilter.vue |  8 +++---
 src/components/Discover/Map/SidebarState.vue  |  8 +++---
 src/components/Discover/Map/SidebarTraces.vue |  8 +++---
 src/components/Discover/Map/SidebarView.vue   |  6 ++--
 src/components/Discover/StatusBar.vue         |  4 +--
 src/components/File/UploadModal.vue           |  4 +--
 src/components/Header.vue                     | 14 +++++-----
 src/components/Navbar.vue                     | 22 +++++++--------
 src/components/durationjs.vue                 |  4 +--
 src/module/alertModal.js                      | 26 ++++++++---------
 src/module/apiError.js                        |  4 +--
 src/module/cytoscapeMap.js                    | 10 +++----
 src/stores/acctMgmt.ts                        |  8 +++---
 src/stores/allMapData.js                      |  2 +-
 src/stores/compare.js                         |  2 +-
 src/stores/conformance.js                     |  2 +-
 src/stores/conformanceInput.js                |  2 +-
 src/stores/cytoscapeStore.ts                  |  2 +-
 src/stores/files.js                           |  8 +++---
 src/stores/loading.js                         |  2 +-
 src/stores/login.ts                           |  2 +-
 src/stores/mapCompareStore.ts                 |  4 +--
 src/stores/mapPathStore.ts                    |  8 +++---
 src/stores/pageAdmin.js                       |  2 +-
 src/stores/performance.js                     |  2 +-
 .../AccountAdmin/AccountAdmin.vue             | 10 +++----
 .../ModalAccountEditCreate.vue                |  2 +-
 .../AccountManagement/ModalAccountInfo.vue    |  2 +-
 .../AccountManagement/ModalDeleteAlert.vue    |  2 +-
 src/views/AccountManagement/MyAccount.vue     | 10 +++----
 src/views/Compare/Dashboard/Compare.vue       |  8 +++---
 src/views/Compare/MapCompare.vue              | 20 ++++++-------
 src/views/Discover/Conformance/index.vue      | 10 +++----
 src/views/Discover/Map/Map.vue                | 20 ++++++-------
 src/views/Discover/Performance/index.vue      | 14 +++++-----
 src/views/Files/Files.vue                     | 24 ++++++++--------
 src/views/Login/Login.vue                     |  6 ++--
 src/views/MainContainer.vue                   | 28 +++++++++----------
 src/views/MemberArea/index.vue                |  4 +--
 src/views/Upload/index.vue                    |  8 +++---
 tests/components/Login.test.js                | 10 +++----
 tests/stores/acctMgmt.test.js                 |  4 +--
 tests/stores/allMapData.test.js               |  2 +-
 tests/stores/compare.test.js                  |  2 +-
 tests/stores/conformance.test.js              |  2 +-
 tests/stores/conformanceInput.test.js         |  2 +-
 tests/stores/cytoscapeStore.test.js           |  2 +-
 tests/stores/files.test.js                    |  2 +-
 tests/stores/loading.test.js                  |  2 +-
 tests/stores/login.test.js                    |  2 +-
 tests/stores/mapCompareStore.test.js          |  2 +-
 tests/stores/mapPathStore.test.js             |  2 +-
 tests/stores/pageAdmin.test.js                |  2 +-
 tests/stores/performance.test.js              |  2 +-
 tests/views/MainContainerGuard.test.js        | 12 ++++----
 69 files changed, 241 insertions(+), 241 deletions(-)

diff --git a/src/components/AccountMenu/AcctMenu.vue b/src/components/AccountMenu/AcctMenu.vue
index 5581595..2a2cbdc 100644
--- a/src/components/AccountMenu/AcctMenu.vue
+++ b/src/components/AccountMenu/AcctMenu.vue
@@ -34,20 +34,20 @@ import { computed, onMounted, ref, } from 'vue';
 import { mapActions, mapState, storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
 import { useRouter } from 'vue-router';
-import LoginStore from '@/stores/login';
-import AcctMgmtStore from '@/stores/acctMgmt';
-import AllMapDataStore from '@/stores/allMapData.js';
-import ConformanceStore from '@/stores/conformance.js';
+import { useLoginStore } from '@/stores/login';
+import { useAcctMgmtStore } from '@/stores/acctMgmt';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
 
 export default {
   setup() {
-    const { logOut } = LoginStore();
-    const loginStore = LoginStore();
+    const { logOut } = useLoginStore();
+    const loginStore = useLoginStore();
     const router = useRouter();
-    const allMapDataStore = AllMapDataStore();
-    const conformanceStore = ConformanceStore();
-    const acctMgmtStore = AcctMgmtStore();
+    const allMapDataStore = useAllMapDataStore();
+    const conformanceStore = useConformanceStore();
+    const acctMgmtStore = useAcctMgmtStore();
     const { tempFilterId } = storeToRefs(allMapDataStore);
     const { conformanceLogTempCheckId } = storeToRefs(conformanceStore);
 
@@ -89,8 +89,8 @@ export default {
     }
   },
   computed: {
-    ...mapState(LoginStore, ['userData']),
-    ...mapState(AcctMgmtStore, ['isAcctMenuOpen']),
+    ...mapState(useLoginStore, ['userData']),
+    ...mapState(useAcctMgmtStore, ['isAcctMenuOpen']),
   },
   methods: {
     clickOtherPlacesThenCloseMenu(){
@@ -119,8 +119,8 @@ export default {
         this.logOut();
       }
     },
-    ...mapActions(LoginStore, ['getUserData']),
-    ...mapActions(AcctMgmtStore, ['closeAcctMenu']),
+    ...mapActions(useLoginStore, ['getUserData']),
+    ...mapActions(useAcctMgmtStore, ['closeAcctMenu']),
   },
   created() {
     this.getUserData();
diff --git a/src/components/Compare/SidebarStates.vue b/src/components/Compare/SidebarStates.vue
index 67481ba..75754c9 100644
--- a/src/components/Compare/SidebarStates.vue
+++ b/src/components/Compare/SidebarStates.vue
@@ -147,13 +147,13 @@
   </Sidebar>
 </template>
 <script>
-import CompareStore from '@/stores/compare.js';
+import { useCompareStore } from '@/stores/compare.js';
 import { getTimeLabel } from '@/module/timeLabel.js';
 import getMoment from 'moment';
 
 export default {
   setup() {
-    const compareStore = CompareStore();
+    const compareStore = useCompareStore();
 
     return { compareStore };
   },
diff --git a/src/components/Discover/Conformance/ConformanceResults.vue b/src/components/Discover/Conformance/ConformanceResults.vue
index 469df1d..9979488 100644
--- a/src/components/Discover/Conformance/ConformanceResults.vue
+++ b/src/components/Discover/Conformance/ConformanceResults.vue
@@ -193,7 +193,7 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import ConformanceStore from '@/stores/conformance.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 import iconNA from '@/components/icons/IconNA.vue';
 import MoreModal from './MoreModal.vue';
 import getNumberLabel from '@/module/numberLabel.js';
@@ -203,7 +203,7 @@ import getMoment from 'moment';
 
 export default {
   setup() {
-    const conformanceStore = ConformanceStore();
+    const conformanceStore = useConformanceStore();
     const { conformanceTempReportData, issueTraces, taskSeq, cases, loopTraces, loopTaskSeq, loopCases } = storeToRefs(conformanceStore);
 
     return { conformanceTempReportData, issueTraces, taskSeq, cases, loopTraces, loopTaskSeq, loopCases, conformanceStore }
diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index c6dde89..8dc9d3b 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -124,9 +124,9 @@
 <script>
 import { storeToRefs, mapState, mapActions, } from 'pinia';
 import i18next from '@/i18n/i18n';
-import ConformanceInputStore from '@/stores/conformanceInput';
-import LoadingStore from '@/stores/loading.js';
-import ConformanceStore from '@/stores/conformance.js';
+import { useConformanceInputStore } from '@/stores/conformanceInput';
+import { useLoadingStore } from '@/stores/loading.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 import ConformanceRadioGroup from './ConformanceSidebar/ConformanceRadioGroup.vue';
 import ConformanceShowBar from './ConformanceSidebar/ConformanceShowBar.vue';
 import ConformanceTimeRange from './ConformanceSidebar/ConformanceTimeRange.vue';
@@ -134,8 +134,8 @@ import ConformanceSelectResult from './ConformanceSidebar/ConformanceSelectResul
 
 export default {
   setup() {
-    const loadingStore = LoadingStore();
-    const conformanceStore = ConformanceStore();
+    const loadingStore = useLoadingStore();
+    const conformanceStore = useConformanceStore();
     const { isLoading } = storeToRefs(loadingStore);
     const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
       selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, cfmPtEteWhole,
@@ -325,7 +325,7 @@ export default {
         this.isMainBtnDisabled = disabledBool;
         return this.isMainBtnDisabled;
     },
-    ...mapState(ConformanceInputStore, ['activityRadioData']),
+    ...mapState(useConformanceInputStore, ['activityRadioData']),
   },
   watch: {
     isSubmittedData: function(newValue) {
@@ -1452,7 +1452,7 @@ export default {
             ? !(start && end)
             : start !== end;
     },
-   ...mapActions(ConformanceInputStore, [''])
+   ...mapActions(useConformanceInputStore, [''])
   },
   created() {
     this.isShowBarOpen = !(this.conformanceLogCreateCheckId || this.conformanceFilterCreateCheckId);
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
index 6950145..6921b2a 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
@@ -11,7 +11,7 @@
 </template>
 <script>
 import { mapActions, } from 'pinia';
-import ConformanceInputStore from "@/stores/conformanceInput";
+import { useConformanceInputStore } from "@/stores/conformanceInput";
 import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
 
 export default {
@@ -58,7 +58,7 @@ export default {
       //this.title: value might be "From" or "To"
       this.setActivityRadioStartEndData(this.inputActivityRadioData.task, this.title);
     },
-    ...mapActions(ConformanceInputStore, ['setActivityRadioStartEndData']),
+    ...mapActions(useConformanceInputStore, ['setActivityRadioStartEndData']),
   },
   created() {
     sortNumEngZhtw(this.sortData);
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
index 2b874fa..d93b732 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue
@@ -52,11 +52,11 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import ConformanceStore from '@/stores/conformance.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 
 export default {
   setup() {
-    const conformanceStore = ConformanceStore();
+    const conformanceStore = useConformanceStore();
     const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
 
     return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
index adcf55d..a4a5043 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue
@@ -30,14 +30,14 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import ConformanceStore from '@/stores/conformance.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 import ResultCheck from '@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue';
 import ResultArrow from '@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue';
 import ResultDot from '@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue';
 
 export default {
   setup() {
-    const conformanceStore = ConformanceStore();
+    const conformanceStore = useConformanceStore();
     const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);
 
     return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected }
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
index bf6c726..8423dbe 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue
@@ -99,16 +99,16 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import LoadingStore from '@/stores/loading.js';
-import ConformanceStore from '@/stores/conformance.js';
+import { useLoadingStore } from '@/stores/loading.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 import ActList from './ActList.vue';
 import ActRadio from './ActRadio.vue';
 import ActSeqDrag from './ActSeqDrag.vue';
 
 export default {
   setup() {
-    const loadingStore = LoadingStore();
-    const conformanceStore = ConformanceStore();
+    const loadingStore = useLoadingStore();
+    const conformanceStore = useConformanceStore();
     const { isLoading } = storeToRefs(loadingStore);
     const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore,
       selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE,
diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
index 789769f..35aea3a 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue
@@ -70,11 +70,11 @@
 <script>
 import TimeRangeDuration from '@/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue';
 import { storeToRefs } from 'pinia';
-import ConformanceStore from '@/stores/conformance.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 
 export default {
   setup() {
-    const conformanceStore = ConformanceStore();
+    const conformanceStore = useConformanceStore();
     const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
       selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, conformanceTask,
       cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart,
diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
index 1ee8143..e4c69c7 100644
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -63,13 +63,13 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import ConformanceStore from '@/stores/conformance.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
 
 export default {
   props: ['listModal', 'listNo', 'traceId', 'firstCases', 'listTraces', 'taskSeq', 'cases', 'category'],
   setup() {
-    const conformanceStore = ConformanceStore();
+    const conformanceStore = useConformanceStore();
     const { infinite404 } = storeToRefs(conformanceStore);
 
     return { infinite404, conformanceStore }
diff --git a/src/components/Discover/Map/Filter/Attributes.vue b/src/components/Discover/Map/Filter/Attributes.vue
index bf3584e..f6278b4 100644
--- a/src/components/Discover/Map/Filter/Attributes.vue
+++ b/src/components/Discover/Map/Filter/Attributes.vue
@@ -121,7 +121,7 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import AllMapDataStore from '@/stores/allMapData.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
 import { setLineChartData } from '@/module/setChartData.js';
 import getMoment from 'moment';
 import InputNumber from 'primevue/inputnumber';
@@ -129,7 +129,7 @@ import { Decimal } from 'decimal.js';
 
 export default {
   setup() {
-    const allMapDataStore = AllMapDataStore();
+    const allMapDataStore = useAllMapDataStore();
     const { filterAttrs } = storeToRefs(allMapDataStore);
 
     return { filterAttrs }
diff --git a/src/components/Discover/Map/Filter/Funnel.vue b/src/components/Discover/Map/Filter/Funnel.vue
index 10d07ca..66c8f76 100644
--- a/src/components/Discover/Map/Filter/Funnel.vue
+++ b/src/components/Discover/Map/Filter/Funnel.vue
@@ -40,14 +40,14 @@
 
 <script>
 import { storeToRefs } from 'pinia';
-import LoadingStore from '@/stores/loading.js';
-import AllMapDataStore from '@/stores/allMapData.js';
+import { useLoadingStore } from '@/stores/loading.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
 import { delaySecond, } from '@/utils/timeUtil.js';
 
 export default {
   setup() {
-    const loadingStore = LoadingStore();
-    const allMapDataStore = AllMapDataStore();
+    const loadingStore = useLoadingStore();
+    const allMapDataStore = useAllMapDataStore();
     const { isLoading } = storeToRefs(loadingStore);
     const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, tempFilterId } = storeToRefs(allMapDataStore);
 
diff --git a/src/components/Discover/Map/Filter/Timeframes.vue b/src/components/Discover/Map/Filter/Timeframes.vue
index d12b83b..5fef18a 100644
--- a/src/components/Discover/Map/Filter/Timeframes.vue
+++ b/src/components/Discover/Map/Filter/Timeframes.vue
@@ -32,7 +32,7 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import AllMapDataStore from '@/stores/allMapData.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
 import { Chart, registerables } from 'chart.js';
 import 'chartjs-adapter-moment';
 import getMoment from 'moment';
@@ -40,7 +40,7 @@ import getMoment from 'moment';
 export default{
   props:['selectValue'],
   setup() {
-    const allMapDataStore = AllMapDataStore();
+    const allMapDataStore = useAllMapDataStore();
     const { filterTimeframe, selectTimeFrame } = storeToRefs(allMapDataStore);
 
     return {allMapDataStore, filterTimeframe, selectTimeFrame }
diff --git a/src/components/Discover/Map/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue
index 6102b26..ef351a1 100644
--- a/src/components/Discover/Map/Filter/Trace.vue
+++ b/src/components/Discover/Map/Filter/Trace.vue
@@ -70,15 +70,15 @@
 
 <script>
 import { storeToRefs } from 'pinia';
-import AllMapDataStore from '@/stores/allMapData.js';
-import LoadingStore from '@/stores/loading.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
+import { useLoadingStore } from '@/stores/loading.js';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
 
 export default {
   expose: ['selectArea', 'showTraceId', 'traceTotal'],
   setup() {
-    const allMapDataStore = AllMapDataStore();
-    const loadingStore = LoadingStore();
+    const allMapDataStore = useAllMapDataStore();
+    const loadingStore = useLoadingStore();
     const { infinit404, baseInfiniteStart, baseTraces, baseTraceTaskSeq, baseCases } = storeToRefs(allMapDataStore);
     const { isLoading } = storeToRefs(loadingStore);
 
diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue
index 8fab9e0..b23f9ed 100644
--- a/src/components/Discover/Map/SidebarFilter.vue
+++ b/src/components/Discover/Map/SidebarFilter.vue
@@ -98,8 +98,8 @@
 
 <script>
 import { storeToRefs } from 'pinia';
-import LoadingStore from '@/stores/loading.js';
-import AllMapDataStore from '@/stores/allMapData.js';
+import { useLoadingStore } from '@/stores/loading.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
 import ActOccCase from '@/components/Discover/Map/Filter/ActOccCase.vue';
 import ActOcc from '@/components/Discover/Map/Filter/ActOcc.vue';
 import ActAndSeq from '@/components/Discover/Map/Filter/ActAndSeq.vue';
@@ -112,8 +112,8 @@ import getMoment from 'moment';
 export default {
   props: ['sidebarFilter', 'filterTasks', 'filterStartToEnd', 'filterEndToStart', 'filterTimeframe', 'filterTrace'],
   setup() {
-    const loadingStore = LoadingStore();
-    const allMapDataStore = AllMapDataStore();
+    const loadingStore = useLoadingStore();
+    const allMapDataStore = useAllMapDataStore();
     const { isLoading } = storeToRefs(loadingStore);
     const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, selectTimeFrame } = storeToRefs(allMapDataStore);
 
diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue
index c76cec7..dfd1902 100644
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/src/components/Discover/Map/SidebarState.vue
@@ -243,8 +243,8 @@
 
 <script>
 import { computed, ref, } from 'vue';
-import PageAdmin from '@/stores/pageAdmin';
-import MapPathStore from '@/stores/mapPathStore';
+import { usePageAdminStore } from '@/stores/pageAdmin';
+import { useMapPathStore } from '@/stores/mapPathStore';
 import { getTimeLabel } from '@/module/timeLabel.js';
 import getMoment from 'moment';
 import i18next from '@/i18n/i18n';
@@ -268,8 +268,8 @@ export default {
     }
   },
   setup(props){
-    const pageAdmin = PageAdmin();
-    const mapPathStore = MapPathStore();
+    const pageAdmin = usePageAdminStore();
+    const mapPathStore = useMapPathStore();
 
     const activeTrace = ref(0);
     const currentMapFile = computed(() => pageAdmin.currentMapFile);
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index a9cb74d..26803e8 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -61,15 +61,15 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import LoadingStore from '@/stores/loading.js';
-import AllMapDataStore from '@/stores/allMapData.js';
+import { useLoadingStore } from '@/stores/loading.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
 import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
 
 export default {
   props: ['sidebarTraces', 'cases'],
   setup() {
-    const loadingStore = LoadingStore();
-    const allMapDataStore = AllMapDataStore();
+    const loadingStore = useLoadingStore();
+    const allMapDataStore = useAllMapDataStore();
     const { isLoading } = storeToRefs(loadingStore);
     const { infinit404, infiniteStart, traceId, traces, traceTaskSeq, infiniteFirstCases } = storeToRefs(allMapDataStore);
 
diff --git a/src/components/Discover/Map/SidebarView.vue b/src/components/Discover/Map/SidebarView.vue
index 2afd97f..a587a81 100644
--- a/src/components/Discover/Map/SidebarView.vue
+++ b/src/components/Discover/Map/SidebarView.vue
@@ -70,7 +70,7 @@
 </template>
 
 <script>
-import MapPathStore from '@/stores/mapPathStore';
+import { useMapPathStore } from '@/stores/mapPathStore';
 import { mapState, mapActions, } from 'pinia';
 export default {
   props: {
@@ -108,7 +108,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(MapPathStore, ['isBPMNOn']),
+    ...mapState(useMapPathStore, ['isBPMNOn']),
   },
   methods: {
     /**
@@ -168,7 +168,7 @@ export default {
       this.setIsBPMNOn(true);
       this.switchMapType('bpmn');
     },
-    ...mapActions(MapPathStore, ['setIsBPMNOn',]),
+    ...mapActions(useMapPathStore, ['setIsBPMNOn',]),
   },
   mounted() {
     this.dataLayerType = 'freq';
diff --git a/src/components/Discover/StatusBar.vue b/src/components/Discover/StatusBar.vue
index edae089..6806184 100644
--- a/src/components/Discover/StatusBar.vue
+++ b/src/components/Discover/StatusBar.vue
@@ -80,13 +80,13 @@
 
 <script>
 import { storeToRefs } from 'pinia';
-import AllMapDataStore from '@/stores/allMapData.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
 import { getTimeLabel } from '@/module/timeLabel.js';
 import getMoment from 'moment';
 
 export default {
   setup() {
-    const allMapDataStore = AllMapDataStore();
+    const allMapDataStore = useAllMapDataStore();
     const { logId, stats, createFilterId } = storeToRefs(allMapDataStore);
 
     return { logId, stats, createFilterId, allMapDataStore };
diff --git a/src/components/File/UploadModal.vue b/src/components/File/UploadModal.vue
index f21dbe5..beba187 100644
--- a/src/components/File/UploadModal.vue
+++ b/src/components/File/UploadModal.vue
@@ -18,12 +18,12 @@
 import IconUploarding from '../icons/IconUploarding.vue';
 import { uploadFailedFirst } from '@/module/alertModal.js'
 import { storeToRefs } from 'pinia';
-import FilesStore from '@/stores/files.js';
+import { useFilesStore } from '@/stores/files.js';
 
 export default {
   props: ['uploadModal'],
   setup() {
-    const filesStore = FilesStore();
+    const filesStore = useFilesStore();
     const { uploadFileName } = storeToRefs(filesStore);
 
     return { filesStore, uploadFileName }
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 293d149..ff239a5 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -23,11 +23,11 @@
 import { ref, } from 'vue';
 import { storeToRefs, } from 'pinia';
 import i18next from '@/i18n/i18n';
-import loginStore from '@/stores/login';
-import useAcctMgmtStore from '@/stores/acctMgmt';
+import { useLoginStore } from '@/stores/login';
+import { useAcctMgmtStore } from '@/stores/acctMgmt';
 import DspLogo from '@/components/icons/DspLogo.vue';
-import AllMapDataStore from '@/stores/allMapData.js';
-import ConformanceStore from '@/stores/conformance.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
 
 export default {
@@ -38,10 +38,10 @@ export default {
     }
   },
   setup() {
-    const store = loginStore();
+    const store = useLoginStore();
     const { logOut } = store;
-    const allMapDataStore = AllMapDataStore();
-    const conformanceStore = ConformanceStore();
+    const allMapDataStore = useAllMapDataStore();
+    const conformanceStore = useConformanceStore();
     const acctMgmtStore = useAcctMgmtStore();
     const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
     const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index c559a51..eb3cd85 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -46,11 +46,11 @@
 </template>
 <script>
 import { storeToRefs, mapState, mapActions, } from 'pinia';
-import filesStore from '@/stores/files.js';
-import AllMapDataStore from '@/stores/allMapData.js';
-import ConformanceStore from '@/stores/conformance.js';
-import PageAdminStore from '@/stores/pageAdmin.js';
-import MapCompareStore from '@/stores/mapCompareStore';
+import { useFilesStore } from '@/stores/files.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
+import { useConformanceStore } from '@/stores/conformance.js';
+import { usePageAdminStore } from '@/stores/pageAdmin.js';
+import { useMapCompareStore } from '@/stores/mapCompareStore';
 import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
 import { saveFilter, savedSuccessfully, saveConformance } from '@/module/alertModal.js';
@@ -59,9 +59,9 @@ import AcctMenu from './AccountMenu/AcctMenu.vue';
 
 export default {
   setup() {
-    const store = filesStore();
-    const allMapDataStore = AllMapDataStore();
-    const conformanceStore = ConformanceStore();
+    const store = useFilesStore();
+    const allMapDataStore = useAllMapDataStore();
+    const conformanceStore = useConformanceStore();
     const { logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdateFilter } = storeToRefs(allMapDataStore);
     const { conformanceRuleData, conformanceLogId, conformanceFilterId,
       conformanceLogTempCheckId, conformanceFilterTempCheckId, 
@@ -85,7 +85,7 @@ export default {
   },
   data() {
     return {
-      mapCompareStore: MapCompareStore(),
+      mapCompareStore: useMapCompareStore(),
       showNavbarBreadcrumb: false,
       navViewData:
       {
@@ -125,7 +125,7 @@ export default {
         this.navViewName === 'ACCOUNT MANAGEMENT' ||
         this.activePage === 'PERFORMANCE';
     },
-    ...mapState(PageAdminStore, [
+    ...mapState(usePageAdminStore, [
       'activePage',
       'pendingActivePage',
       'activePageComputedByRoute',
@@ -338,7 +338,7 @@ export default {
           }
       }
     },
-    ...mapActions(PageAdminStore, [
+    ...mapActions(usePageAdminStore, [
       'setPendingActivePage',
       'setPreviousPage',
       'setActivePage',
diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue
index daebc54..d277b7c 100644
--- a/src/components/durationjs.vue
+++ b/src/components/durationjs.vue
@@ -42,7 +42,7 @@
 <script>
 //:value="tUnits[unit].val.toString().padStart(2, '0')"
 import { mapActions, } from 'pinia';
-import ConformanceInputStore from '@/stores/conformanceInput';
+import { useConformanceInputStore } from '@/stores/conformanceInput';
 
 export default {
   props: {
@@ -424,7 +424,7 @@ export default {
       }
     },
     ...mapActions(
-      ConformanceInputStore,[]
+      useConformanceInputStore,[]
     ),
   },
   created() {
diff --git a/src/module/alertModal.js b/src/module/alertModal.js
index 9618b4e..38445cb 100644
--- a/src/module/alertModal.js
+++ b/src/module/alertModal.js
@@ -1,8 +1,8 @@
 import Swal from 'sweetalert2';
-import AllMapDataStore from '@/stores/allMapData.js';
-import ConformanceStore from '@/stores/conformance.js';
-import FilesStore from '@/stores/files.js';
-import PageAdminStore from '@/stores/pageAdmin.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
+import { useConformanceStore } from '@/stores/conformance.js';
+import { useFilesStore } from '@/stores/files.js';
+import { usePageAdminStore } from '@/stores/pageAdmin.js';
 import { useModalStore } from '@/stores/modal.js';
 import { escapeHtml } from '@/utils/escapeHtml.js';
 
@@ -23,7 +23,7 @@ const customClass = {
  */
 export async function saveFilter(addFilterId, next = null) {
   let fileName = '';
-  const pageAdminStore = PageAdminStore();
+  const pageAdminStore = usePageAdminStore();
 
   const { value, isConfirmed } = await Swal.fire({
     title: 'SAVE NEW FILTER',
@@ -90,8 +90,8 @@ export async function savedSuccessfully(value) {
  * @param { function } logOut 登出函式
  */
 export async function leaveFilter(next, addFilterId, toPath, logOut) {
-  const allMapDataStore = AllMapDataStore();
-  const pageAdminStore = PageAdminStore();
+  const allMapDataStore = useAllMapDataStore();
+  const pageAdminStore = usePageAdminStore();
 
   const result = await Swal.fire({
     title: 'SAVE YOUR FILTER?',
@@ -122,7 +122,7 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
   } else if(result.dismiss === 'cancel') {
     // console.log('popup cancel case', );
     // Handle page admin issue
-    // console.log("PageAdminStore.activePage", PageAdminStore.activePage);
+    // console.log("usePageAdminStore.activePage", usePageAdminStore.activePage);
     pageAdminStore.keepPreviousPage();
 
     allMapDataStore.tempFilterId = null;
@@ -130,7 +130,7 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
   } else if(result.dismiss === 'backdrop') {
     // console.log('popup backdrop case', );
     // Handle page admin issue
-    // console.log("PageAdminStore.activePage", PageAdminStore.activePage);
+    // console.log("usePageAdminStore.activePage", usePageAdminStore.activePage);
     pageAdminStore.keepPreviousPage();
 
     if(!logOut){
@@ -186,7 +186,7 @@ export async function saveConformance(addConformanceCreateCheckId) {
  * @param { function } logOut 登出函式
  */
 export async function leaveConformance(next, addConformanceCreateCheckId, toPath, logOut) {
-  const conformanceStore = ConformanceStore();
+  const conformanceStore = useConformanceStore();
   const result = await showConfirmationDialog();
   
   if (result.isConfirmed) {
@@ -359,7 +359,7 @@ export async function uploadSuccess() {
  * @param { object } fetchData 後端 API POST data
  */
 export async function uploadConfirm(fetchData) {
-  const filesStore = FilesStore();
+  const filesStore = useFilesStore();
   const result = await Swal.fire({
     title: 'ARE YOU SURE?',
     html: 'After importing, you won’t be able to modify labels.',
@@ -441,7 +441,7 @@ export async function renameModal(rename, type, id, baseName) {
  * @param { string } name 原本的檔案
  */
 export async function deleteFileModal(files, type, id, name) {
-  const filesStore = FilesStore();
+  const filesStore = useFilesStore();
 
   const safeName = escapeHtml(name);
   const htmlText = files.length === 0 ? `Do you really want to delete <span class="text-primary">${safeName}</span>?` : `<div class="text-left mx-4 space-y-1"><p class="mb-2">Do you really want to delete <span class="text-primary">${safeName}</span>?</p><p>The following dependent file(s) will also be deleted:</p><ul class="list-disc ml-6">${files}</ul></div>`;
@@ -489,7 +489,7 @@ export async function deleteSuccess() {
  * @param {array} reallyDeleteData 被刪除的檔案 data，未取得 recordId 而傳入
  */
 export async function reallyDeleteInformation(files, reallyDeleteData) {
-  const filesStore = FilesStore();
+  const filesStore = useFilesStore();
   const deleteCustomClass = { ...customClass };
   const htmlText = `<div class="text-left mx-4 space-y-1"><p>The following file(s) have been deleted by other user(s):</p><ul class="list-disc ml-6">${files}</ul></div>`;
 
diff --git a/src/module/apiError.js b/src/module/apiError.js
index b846b02..b610d6a 100644
--- a/src/module/apiError.js
+++ b/src/module/apiError.js
@@ -1,4 +1,4 @@
-import loadingStore from '@/stores/loading.js';
+import { useLoadingStore } from '@/stores/loading.js';
 import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 
@@ -12,7 +12,7 @@ const delay = (s = 0) =>  new Promise((resolve, reject) => setTimeout(resolve, s
  * @param   {string} toastMessage Toast 的提示文字
  */
 export default async function apiError(error, toastMessage) {
-  const loading = loadingStore();
+  const loading = useLoadingStore();
   const $toast = useToast();
   await delay();
   loading.isLoading = true;
diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js
index 87d8806..a5863c4 100644
--- a/src/module/cytoscapeMap.js
+++ b/src/module/cytoscapeMap.js
@@ -5,9 +5,9 @@ import fcose from 'cytoscape-fcose';
 import cola from 'cytoscape-cola';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
-import MapPathStore from '@/stores/mapPathStore';
+import { useMapPathStore } from '@/stores/mapPathStore';
 import { getTimeLabel } from '@/module/timeLabel.js'; // 時間格式轉換器
-import CytoscapeStore from '@/stores/cytoscapeStore';
+import { useCytoscapeStore } from '@/stores/cytoscapeStore';
 import { SAVE_KEY_NAME } from '@/constants/constants.js';
 
 const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sonar-qube
@@ -232,12 +232,12 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
 
   // 按下節點光暈效果與鄰邊光暈效果
   cy.on('tap, mousedown', 'node', function (event) {
-    MapPathStore().onNodeClickHighlightEdges(event.target);
+    useMapPathStore().onNodeClickHighlightEdges(event.target);
   });
 
   // 按下線段光暈效果與兩端點光暈效果
   cy.on('tap, mousedown', 'edge', function (event) {
-    MapPathStore().onEdgeClickHighlightNodes(event.target);
+    useMapPathStore().onEdgeClickHighlightNodes(event.target);
   });
 
   // creat tippy.js
@@ -260,7 +260,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
   });
 
   // here we remember and recall positions
-  const cytoscapeStore = CytoscapeStore();
+  const cytoscapeStore = useCytoscapeStore();
   cy.ready(() => {
     cytoscapeStore.loadPositionsFromStorage(rank);
     // 判斷localStorage是否儲存過拜訪資訊
diff --git a/src/stores/acctMgmt.ts b/src/stores/acctMgmt.ts
index aa6a774..2fca08f 100644
--- a/src/stores/acctMgmt.ts
+++ b/src/stores/acctMgmt.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import apiClient from '@/api/client.js';
 import apiError from '@/module/apiError';
-import piniaLoginStore from '@/stores/login';
+import { useLoginStore } from '@/stores/login';
 import { JUST_CREATE_ACCOUNT_HOT_DURATION_MINS } from '@/constants/constants';
 
 interface User {
@@ -25,7 +25,7 @@ interface EditDetail {
   is_active: boolean;
 }
 
-export default defineStore('acctMgmtStore', {
+export const useAcctMgmtStore = defineStore('acctMgmtStore', {
   persist: true, 
   state: () => ({
     allUserAccoutList: [] as User[],
@@ -99,7 +99,7 @@ export default defineStore('acctMgmtStore', {
      * Add some customization. For example, add isHovered field
      */
     async customizeAllUserList(rawResponseData: User[]): Promise<User[]> {
-      const loginStore = piniaLoginStore();
+      const loginStore = useLoginStore();
       await loginStore.getUserData();
       const loginUserData:User = loginStore.userData;
       return rawResponseData.map(user => ({
@@ -114,7 +114,7 @@ export default defineStore('acctMgmtStore', {
      * Current logged in user should be placed at the first row on list
      */
     async moveCurrentLoginUserToFirstRow(fetchedUserList: User[]): Promise<User[]> {
-      const loginStore = piniaLoginStore();
+      const loginStore = useLoginStore();
       await loginStore.getUserData();
       const loginUserData:User = loginStore.userData;
       const foundLoginUserIndex = fetchedUserList.findIndex(user => user.username === loginUserData.username);
diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js
index f30e389..5a197d8 100644
--- a/src/stores/allMapData.js
+++ b/src/stores/allMapData.js
@@ -4,7 +4,7 @@ import apiClient from "@/api/client.js";
 import apiError from '@/module/apiError.js';
 import { Decimal } from 'decimal.js';
 
-export default defineStore('allMapDataStore', {
+export const useAllMapDataStore = defineStore('allMapDataStore', {
   state: () => ({
     baseLogId: null,
     logId: null,
diff --git a/src/stores/compare.js b/src/stores/compare.js
index b1383c8..d764455 100644
--- a/src/stores/compare.js
+++ b/src/stores/compare.js
@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import apiClient from "@/api/client.js";
 import apiError from '@/module/apiError.js';
 
-export default defineStore('compareStore', {
+export const useCompareStore = defineStore('compareStore', {
   state: () => ({
     allCompareDashboardData: null,
   }),
diff --git a/src/stores/conformance.js b/src/stores/conformance.js
index 196ab73..3ae9478 100644
--- a/src/stores/conformance.js
+++ b/src/stores/conformance.js
@@ -5,7 +5,7 @@ import abbreviateNumber from '@/module/abbreviateNumber.js';
 import apiClient from "@/api/client.js";
 import apiError from '@/module/apiError.js';
 
-export default defineStore('conformanceStore', {
+export const useConformanceStore = defineStore('conformanceStore', {
   state: () => ({
     conformanceLogId: null, // log 檔
     conformanceFilterId: null, // filter 檔
diff --git a/src/stores/conformanceInput.js b/src/stores/conformanceInput.js
index c1cdf0d..c814ad3 100644
--- a/src/stores/conformanceInput.js
+++ b/src/stores/conformanceInput.js
@@ -7,7 +7,7 @@ import moment from 'moment';
  * 而後者則側重在 API 的串接之所需
  */
 
-export default defineStore('conformanceInputStore', {
+export const useConformanceInputStore = defineStore('conformanceInputStore', {
   state: () => ({
     inputDataToSave: {
         inputStart: null, // 有待釐清，start 是活動的開始，還是時間的開始?
diff --git a/src/stores/cytoscapeStore.ts b/src/stores/cytoscapeStore.ts
index 67a6935..f494c79 100644
--- a/src/stores/cytoscapeStore.ts
+++ b/src/stores/cytoscapeStore.ts
@@ -23,7 +23,7 @@ interface NodePositions {
 }
 
 
-export default defineStore('useCytoscapeStore', {
+export const useCytoscapeStore = defineStore('cytoscapeStore', {
   state: () => ({
     nodePositions: {} as NodePositions,
     currentGraphId: "",
diff --git a/src/stores/files.js b/src/stores/files.js
index 18a8cfd..c0db346 100644
--- a/src/stores/files.js
+++ b/src/stores/files.js
@@ -4,9 +4,9 @@ import moment from 'moment';
 import apiError from '@/module/apiError.js';
 import Swal from 'sweetalert2';
 import { uploadFailedFirst, uploadFailedSecond, uploadloader, uploadSuccess, deleteSuccess } from '@/module/alertModal.js';
-import loadingStore from '@/stores/loading.js';
+import { useLoadingStore } from '@/stores/loading.js';
 
-export default defineStore('filesStore', {
+export const useFilesStore = defineStore('filesStore', {
   state: () => ({
     allEventFiles: [
       {
@@ -259,7 +259,7 @@ export default defineStore('filesStore', {
         console.error('Delete File API Error: invalid id');
         return;
       };
-      const loading = loadingStore();
+      const loading = useLoadingStore();
       loading.isLoading = true;
       switch (type) {
         case 'log':
@@ -292,7 +292,7 @@ export default defineStore('filesStore', {
     async deletionRecord(id) {
       let api = '';
 
-      const loading = loadingStore();
+      const loading = useLoadingStore();
       loading.isLoading = true;
       api = `/api/deletion/${id}`;
       try {
diff --git a/src/stores/loading.js b/src/stores/loading.js
index 5bf5c33..cfe0d36 100644
--- a/src/stores/loading.js
+++ b/src/stores/loading.js
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 
-export default defineStore('loadingStore', {
+export const useLoadingStore = defineStore('loadingStore', {
   state: () => ({
     isLoading: true,
   }),
diff --git a/src/stores/login.ts b/src/stores/login.ts
index 6faae30..339f832 100644
--- a/src/stores/login.ts
+++ b/src/stores/login.ts
@@ -4,7 +4,7 @@ import apiClient from '@/api/client.js';
 import apiError from '@/module/apiError.js';
 import { deleteCookie, setCookie, setCookieWithoutExpiration, getCookie } from "../utils/cookieUtil";
 
-export default defineStore('loginStore', {
+export const useLoginStore = defineStore('loginStore', {
   // data, methods, computed
   // state, actions, getters
   state: () => ({
diff --git a/src/stores/mapCompareStore.ts b/src/stores/mapCompareStore.ts
index d319239..baa9c90 100644
--- a/src/stores/mapCompareStore.ts
+++ b/src/stores/mapCompareStore.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import AllMapData from '@/stores/allMapData.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
 import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
 import ImgCapsuleGlow1 from '@/assets/capsule1-glow.svg';
 import ImgCapsuleGlow2 from '@/assets/capsule2-glow.svg';
@@ -13,7 +13,7 @@ import ImgCapsule4 from '@/assets/capsule4.svg';
 const ImgCapsulesGlow = [ImgCapsuleGlow1, ImgCapsuleGlow2, ImgCapsuleGlow3, ImgCapsuleGlow4];
 const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
 
-export default defineStore('useMapCompareStore', {
+export const useMapCompareStore = defineStore('mapCompareStore', {
     state: () => ({
         routeParam: {
             primaryType: '',
diff --git a/src/stores/mapPathStore.ts b/src/stores/mapPathStore.ts
index 9671f66..414852f 100644
--- a/src/stores/mapPathStore.ts
+++ b/src/stores/mapPathStore.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import AllMapData from '@/stores/allMapData.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
 import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
 import ImgCapsuleGlow1 from '@/assets/capsule1-glow.svg';
 import ImgCapsuleGlow2 from '@/assets/capsule2-glow.svg';
@@ -13,7 +13,7 @@ import ImgCapsule4 from '@/assets/capsule4.svg';
 const ImgCapsulesGlow = [ImgCapsuleGlow1, ImgCapsuleGlow2, ImgCapsuleGlow3, ImgCapsuleGlow4];
 const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
 
-export default defineStore('useMapPathStore', {
+export const useMapPathStore = defineStore('mapPathStore', {
   state: () => ({
     clickedPath: [],
     insights: {},
@@ -65,7 +65,7 @@ export default defineStore('useMapPathStore', {
       }
     },
     async createInsightWithPath() {
-      const { insights } = AllMapData();
+      const { insights } = useAllMapDataStore();
       this.insights = { ...insights };
       this.startNode = this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.nodes()
         .filter(function (elem) {
@@ -118,7 +118,7 @@ export default defineStore('useMapPathStore', {
         });
       // Depth First Search from the starting node
       await this.depthFirstSearchCreatePath(this.startNode, [this.startNode], []);
-      const { insights } = AllMapData();
+      const { insights } = useAllMapDataStore();
       this.insights = { ...insights };
       await this.matchGraphPathWithInsightsPath();
     },
diff --git a/src/stores/pageAdmin.js b/src/stores/pageAdmin.js
index a307f48..fc966c3 100644
--- a/src/stores/pageAdmin.js
+++ b/src/stores/pageAdmin.js
@@ -7,7 +7,7 @@ const printPageAdminLog = false;
 // Therefore, we need to handle page transitions caused by both of these methods.
 // 至少有兩種方式引起畫面的導向: 點選導覽按鈕與重新整理網頁
 // 因此至少要處理這兩種方式所引起的畫面切換
-export default defineStore('pageAdminStore', {
+export const usePageAdminStore = defineStore('pageAdminStore', {
   state: () => ({
      activePage: 'MAP',
      previousPage: 'MAP',
diff --git a/src/stores/performance.js b/src/stores/performance.js
index 60c0710..5daf320 100644
--- a/src/stores/performance.js
+++ b/src/stores/performance.js
@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import apiClient from "@/api/client.js";
 import apiError from '@/module/apiError.js';
 
-export default defineStore('performanceStore', {
+export const usePerformanceStore = defineStore('performanceStore', {
   state: () => ({
     allPerformanceData: null,
     freqChartData: null,
diff --git a/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue b/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
index 77a260d..6e4f0b0 100644
--- a/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
+++ b/src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
@@ -115,10 +115,10 @@
 <script>
 import { ref, computed, onMounted, watch, } from 'vue';
 import { mapState, mapActions, } from 'pinia';
-import LoadingStore from '@/stores/loading.js';
+import { useLoadingStore } from '@/stores/loading.js';
 import { useModalStore } from '@/stores/modal.js';
-import useAcctMgmtStore from '@/stores/acctMgmt';
-import piniaLoginStore from '@/stores/login';
+import { useAcctMgmtStore } from '@/stores/acctMgmt';
+import { useLoginStore } from '@/stores/login';
 import SearchBar from '../../../components/AccountMenu/SearchBar.vue';
 import i18next from '@/i18n/i18n.js';
 import { useToast } from 'vue-toast-notification';
@@ -140,9 +140,9 @@ export default {
     setup() {
         const toast = useToast();
         const acctMgmtStore = useAcctMgmtStore();
-        const loadingStore = LoadingStore();
+        const loadingStore = useLoadingStore();
         const modalStore = useModalStore();
-        const loginStore = piniaLoginStore();
+        const loginStore = useLoginStore();
         const infiniteStart = ref(0);
 
         const shouldUpdateList = computed(() => acctMgmtStore.shouldUpdateList);
diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue
index f429c64..c68257d 100644
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/src/views/AccountManagement/ModalAccountEditCreate.vue
@@ -188,7 +188,7 @@ import { mapActions, } from 'pinia';
 import { useModalStore } from '@/stores/modal.js';
 import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toast-notification';
-import useAcctMgmtStore from '@/stores/acctMgmt';
+import { useAcctMgmtStore } from '@/stores/acctMgmt';
 import ModalHeader from "./ModalHeader.vue";
 import IconChecked from "@/components/icons/IconChecked.vue";
 import { MODAL_CREATE_NEW, MODAL_ACCT_EDIT, PWD_VALID_LENGTH } from '@/constants/constants.js';
diff --git a/src/views/AccountManagement/ModalAccountInfo.vue b/src/views/AccountManagement/ModalAccountInfo.vue
index c7a49d4..9cf9d6c 100644
--- a/src/views/AccountManagement/ModalAccountInfo.vue
+++ b/src/views/AccountManagement/ModalAccountInfo.vue
@@ -25,7 +25,7 @@
 <script>
 import { onBeforeMount, computed, ref } from 'vue';
 import i18next from '@/i18n/i18n.js';
-import useAcctMgmtStore from '@/stores/acctMgmt';
+import { useAcctMgmtStore } from '@/stores/acctMgmt';
 import ModalHeader from './ModalHeader.vue';
 import Badge from '../../components/Badge.vue';
 
diff --git a/src/views/AccountManagement/ModalDeleteAlert.vue b/src/views/AccountManagement/ModalDeleteAlert.vue
index ca24757..d4616a2 100644
--- a/src/views/AccountManagement/ModalDeleteAlert.vue
+++ b/src/views/AccountManagement/ModalDeleteAlert.vue
@@ -31,7 +31,7 @@
 import { defineComponent, } from 'vue';
 import { useModalStore } from '@/stores/modal.js';
 import { useRouter } from 'vue-router';
-import useAcctMgmtStore from '@/stores/acctMgmt';
+import { useAcctMgmtStore } from '@/stores/acctMgmt';
 import i18next from '@/i18n/i18n.js';
 import { useToast } from 'vue-toast-notification';
 
diff --git a/src/views/AccountManagement/MyAccount.vue b/src/views/AccountManagement/MyAccount.vue
index 9f9ba9f..3a02ce5 100644
--- a/src/views/AccountManagement/MyAccount.vue
+++ b/src/views/AccountManagement/MyAccount.vue
@@ -117,10 +117,10 @@
 <script>
 import { onMounted, computed, ref, } from 'vue';
 import i18next from '@/i18n/i18n.js';
-import LoginStore from '@/stores/login';
-import useAcctMgmtStore from '@/stores/acctMgmt';
+import { useLoginStore } from '@/stores/login';
+import { useAcctMgmtStore } from '@/stores/acctMgmt';
 import Badge from '../../components/Badge.vue';
-import LoadingStore from '@/stores/loading.js';
+import { useLoadingStore } from '@/stores/loading.js';
 import Button from '@/components/Button.vue';
 import ButtonFilled from '@/components/ButtonFilled.vue';
 import { useToast } from 'vue-toast-notification';
@@ -128,8 +128,8 @@ import { PWD_VALID_LENGTH } from '@/constants/constants.js';
 
 export default {
     setup() {
-        const loadingStore = LoadingStore();
-        const loginStore = LoginStore();
+        const loadingStore = useLoadingStore();
+        const loginStore = useLoginStore();
         const acctMgmtStore = useAcctMgmtStore();
         const toast = useToast();
 
diff --git a/src/views/Compare/Dashboard/Compare.vue b/src/views/Compare/Dashboard/Compare.vue
index 0759951..e0f4c70 100644
--- a/src/views/Compare/Dashboard/Compare.vue
+++ b/src/views/Compare/Dashboard/Compare.vue
@@ -152,8 +152,8 @@
 <script>
 import { storeToRefs } from 'pinia';
 import moment from 'moment';
-import LoadingStore from '@/stores/loading.js';
-import CompareStore from '@/stores/compare.js';
+import { useLoadingStore } from '@/stores/loading.js';
+import { useCompareStore } from '@/stores/compare.js';
 import SidebarStates from '@/components/Compare/SidebarStates.vue';
 import { setLineChartData } from '@/module/setChartData.js';
 import { simpleTimeLabel, followTimeLabel,
@@ -175,8 +175,8 @@ import FreqChart from '../../Discover/Performance/FreqChart.vue';
 
 export default {
   setup() {
-    const loadingStore = LoadingStore();
-    const compareStore = CompareStore();
+    const loadingStore = useLoadingStore();
+    const compareStore = useCompareStore();
     const { isLoading } = storeToRefs(loadingStore);
     const { compareDashboardData } = storeToRefs(compareStore);
 
diff --git a/src/views/Compare/MapCompare.vue b/src/views/Compare/MapCompare.vue
index 9192dee..99b7ab3 100644
--- a/src/views/Compare/MapCompare.vue
+++ b/src/views/Compare/MapCompare.vue
@@ -56,12 +56,12 @@
   import { onBeforeMount, computed, } from 'vue';
   import { storeToRefs } from 'pinia';
   import { useRoute } from 'vue-router';
-  import LoadingStore from '@/stores/loading.js';
-  import AllMapDataStore from '@/stores/allMapData.js';
-  import ConformanceStore from '@/stores/conformance.js';
+  import { useLoadingStore } from '@/stores/loading.js';
+  import { useAllMapDataStore } from '@/stores/allMapData.js';
+  import { useConformanceStore } from '@/stores/conformance.js';
   import cytoscapeMap from '@/module/cytoscapeMap.js';
-  import CytoscapeStore from '@/stores/cytoscapeStore';
-  import MapPathStore from '@/stores/mapPathStore';
+  import { useCytoscapeStore } from '@/stores/cytoscapeStore';
+  import { useMapPathStore } from '@/stores/mapPathStore';
   import SidebarView from '@/components/Discover/Map/SidebarView.vue';
   import SidebarState from '@/components/Discover/Map/SidebarState.vue';
   import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
@@ -75,8 +75,8 @@
   
   export default {
     setup() {
-      const loadingStore = LoadingStore();
-      const allMapDataStore = AllMapDataStore();
+      const loadingStore = useLoadingStore();
+      const allMapDataStore = useAllMapDataStore();
       const { isLoading } = storeToRefs(loadingStore);
       const route = useRoute();
       const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
@@ -85,7 +85,7 @@
         postRuleData
       } = storeToRefs(allMapDataStore);
   
-      const cytoscapeStore = CytoscapeStore();
+      const cytoscapeStore = useCytoscapeStore();
   
       const { setCurrentGraphId } = cytoscapeStore;
   
@@ -142,7 +142,7 @@
         cytoscapeGraph: null,
         curveStyle:'unbundled-bezier', // unbundled-bezier | taxi
         mapType: 'processMap', // processMap | bpmn
-        mapPathStore: MapPathStore(),
+        mapPathStore: useMapPathStore(),
         dataLayerType: 'freq', // freq | duration
         dataLayerOption: 'total',
         rank: 'LR', // 直向 TB | 橫向 LR
@@ -516,7 +516,7 @@
       const isCheckPage = to.name.includes('Check');
   
       if (isCheckPage) {
-        const conformanceStore = ConformanceStore();
+        const conformanceStore = useConformanceStore();
         switch (to.params.type) {
           case 'log':
             conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
diff --git a/src/views/Discover/Conformance/index.vue b/src/views/Discover/Conformance/index.vue
index da27e61..dff5b15 100644
--- a/src/views/Discover/Conformance/index.vue
+++ b/src/views/Discover/Conformance/index.vue
@@ -9,16 +9,16 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import LoadingStore from '@/stores/loading.js';
-import ConformanceStore from '@/stores/conformance.js';
+import { useLoadingStore } from '@/stores/loading.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 import StatusBar from '@/components/Discover/StatusBar.vue';
 import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
 import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';
 
 export default {
   setup() {
-    const loadingStore = LoadingStore();
-    const conformanceStore = ConformanceStore();
+    const loadingStore = useLoadingStore();
+    const conformanceStore = useConformanceStore();
     const { isLoading } = storeToRefs(loadingStore);
     const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
       conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence,
@@ -90,7 +90,7 @@ export default {
   async beforeRouteEnter(to, from, next) {
     const isCheckPage = to.name.includes('Check');
     if (isCheckPage) {
-      const conformanceStore = ConformanceStore();
+      const conformanceStore = useConformanceStore();
       // Save token in Headers.
       // (?:^|.;\s)：匹配 "luciaToken" 之前的內容，允許它在字符串開頭或某個分號之後。
       // luciaToken\s=\s**：匹配 "luciaToken="，並忽略兩邊的空格。
diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue
index d6f1663..7d14f8d 100644
--- a/src/views/Discover/Map/Map.vue
+++ b/src/views/Discover/Map/Map.vue
@@ -64,12 +64,12 @@
 import { onBeforeMount, computed, } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
-import LoadingStore from '@/stores/loading.js';
-import AllMapDataStore from '@/stores/allMapData.js';
-import ConformanceStore from '@/stores/conformance.js';
+import { useLoadingStore } from '@/stores/loading.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 import cytoscapeMap from '@/module/cytoscapeMap.js';
-import CytoscapeStore from '@/stores/cytoscapeStore';
-import MapPathStore from '@/stores/mapPathStore';
+import { useCytoscapeStore } from '@/stores/cytoscapeStore';
+import { useMapPathStore } from '@/stores/mapPathStore';
 import SidebarView from '@/components/Discover/Map/SidebarView.vue';
 import SidebarState from '@/components/Discover/Map/SidebarState.vue';
 import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
@@ -83,8 +83,8 @@ const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
 
 export default {
   setup() {
-    const loadingStore = LoadingStore();
-    const allMapDataStore = AllMapDataStore();
+    const loadingStore = useLoadingStore();
+    const allMapDataStore = useAllMapDataStore();
     const { isLoading } = storeToRefs(loadingStore);
     const route = useRoute();
     const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
@@ -93,7 +93,7 @@ export default {
       postRuleData
     } = storeToRefs(allMapDataStore);
 
-    const cytoscapeStore = CytoscapeStore();
+    const cytoscapeStore = useCytoscapeStore();
 
     const { setCurrentGraphId } = cytoscapeStore;
 
@@ -151,7 +151,7 @@ export default {
       cytoscapeGraph: null,
       curveStyle: 'unbundled-bezier', // unbundled-bezier | taxi
       mapType: 'processMap', // processMap | bpmn
-      mapPathStore: MapPathStore(),
+      mapPathStore: useMapPathStore(),
       dataLayerType: 'freq', // freq | duration
       dataLayerOption: 'total',
       rank: 'LR', // 直向 TB | 橫向 LR
@@ -534,7 +534,7 @@ export default {
     const isCheckPage = to.name.includes('Check');
 
     if (isCheckPage) {
-      const conformanceStore = ConformanceStore();
+      const conformanceStore = useConformanceStore();
       switch (to.params.type) {
         case 'log':
           conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index 350f135..66a9019 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -138,9 +138,9 @@
 <script>
 import { storeToRefs, mapActions, } from 'pinia';
 import moment from 'moment';
-import LoadingStore from '@/stores/loading.js';
-import PerformanceStore from '@/stores/performance.js';
-import ConformanceStore from '@/stores/conformance.js';
+import { useLoadingStore } from '@/stores/loading.js';
+import { usePerformanceStore } from '@/stores/performance.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 import StatusBar from '@/components/Discover/StatusBar.vue';
 import { setLineChartData } from '@/module/setChartData.js';
 import { simpleTimeLabel, followTimeLabel,
@@ -156,8 +156,8 @@ const primeVueTicksLimit = PRIME_VUE_TICKS_LIMIT;
 
 export default {
   setup() {
-    const loadingStore = LoadingStore();
-    const performanceStore = PerformanceStore();
+    const loadingStore = useLoadingStore();
+    const performanceStore = usePerformanceStore();
     const { isLoading } = storeToRefs(loadingStore);
     const { performanceData } = storeToRefs(performanceStore);
 
@@ -864,7 +864,7 @@ export default {
 
       return [primeVueSetData, primeVueSetOption]
     },
-    ...mapActions(PerformanceStore, [
+    ...mapActions(usePerformanceStore, [
       'setFreqChartData',
       'setFreqChartOptions',
       'setFreqChartXData'
@@ -918,7 +918,7 @@ export default {
     const isCheckPage = to.name.includes('Check');
 
     if (isCheckPage) {
-      const conformanceStore = ConformanceStore();
+      const conformanceStore = useConformanceStore();
       switch (to.params.type) {
         case 'log':
           conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
diff --git a/src/views/Files/Files.vue b/src/views/Files/Files.vue
index a720e8a..0f66c7d 100644
--- a/src/views/Files/Files.vue
+++ b/src/views/Files/Files.vue
@@ -222,12 +222,12 @@
 </template>
 <script>
   import { storeToRefs, mapActions, } from 'pinia';
-  import MapCompareStore from '@/stores/mapCompareStore';
-  import LoginStore from '@/stores/login';
-  import filesStore from '@/stores/files.js';
-  import AllMapDataStore from '@/stores/allMapData.js';
-  import PageAdmin from '@/stores/pageAdmin.js';
-  import LoadingStore from '@/stores/loading.js';
+  import { useMapCompareStore } from '@/stores/mapCompareStore';
+  import { useLoginStore } from '@/stores/login';
+  import { useFilesStore } from '@/stores/files.js';
+  import { useAllMapDataStore } from '@/stores/allMapData.js';
+  import { usePageAdminStore } from '@/stores/pageAdmin.js';
+  import { useLoadingStore } from '@/stores/loading.js';
   import IconDataFormat from '@/components/icons/IconDataFormat.vue';
   import IconRule from '@/components/icons/IconRule.vue';
   import IconsFilter from '@/components/icons/IconsFilter.vue';
@@ -240,7 +240,7 @@
   export default {
     data() {
       return {
-        mapCompareStore: MapCompareStore(),
+        mapCompareStore: useMapCompareStore(),
         isActive: null,
         isHover: null,
         switchListOrGrid: false,
@@ -286,10 +286,10 @@
       }
     },
     setup() {
-      const loginStore = LoginStore();
-      const store = filesStore();
-      const allMapDataStore = AllMapDataStore();
-      const loadingStore = LoadingStore();
+      const loginStore = useLoginStore();
+      const store = useFilesStore();
+      const allMapDataStore = useAllMapDataStore();
+      const loadingStore = useLoadingStore();
       const { dependentsData, filesTag } = storeToRefs(store);
       const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
       const { isLoading } = storeToRefs(loadingStore);
@@ -605,7 +605,7 @@
         }
       },
       ...mapActions(
-        PageAdmin, ['setCurrentMapFile',],
+        usePageAdminStore, ['setCurrentMapFile',],
       )
     },
     mounted() {
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 7aafc6c..df1fc87 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -49,7 +49,7 @@
 <script>
 import { ref, } from 'vue';
 import { storeToRefs, mapActions } from 'pinia';
-import loginStore from '@/stores/login';
+import { useLoginStore } from '@/stores/login';
 import IconMember from '@/components/icons/IconMember.vue';
 import IconLockKey from '@/components/icons/IconLockKey.vue';
 import IconEyeOpen from '@/components/icons/IconEyeOpen.vue';
@@ -65,7 +65,7 @@ export default {
   },
   setup() {
     // 調用函數，獲取 Store
-    const store = loginStore();
+    const store = useLoginStore();
     // 調用 store 裡的 state
     const { auth, isInvalid } = storeToRefs(store);
     // 調用 store 裡的 action
@@ -109,7 +109,7 @@ export default {
     },
     onInputPwdFocus(){
     },
-    ...mapActions(loginStore, ['setRememberedReturnToUrl']),
+    ...mapActions(useLoginStore, ['setRememberedReturnToUrl']),
   },
   created() {
     // 考慮到使用者可能在未登入的情況下貼入一個頁面網址連結過來瀏覽器
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index a35bda4..8632ff9 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -14,25 +14,25 @@
 import { onBeforeMount, } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs, mapActions, mapState, } from 'pinia';
-import LoadingStore from '@/stores/loading.js';
-import AllMapDataStore from '@/stores/allMapData.js';
-import ConformanceStore from '@/stores/conformance.js';
+import { useLoadingStore } from '@/stores/loading.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 import Header from "@/components/Header.vue";
 import Navbar from "@/components/Navbar.vue";
 import Loading from '@/components/Loading.vue';
 import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
-import PageAdminStore from '@/stores/pageAdmin.js';
-import LoginStore from "@/stores/login";
+import { usePageAdminStore } from '@/stores/pageAdmin.js';
+import { useLoginStore } from "@/stores/login";
 import { getCookie, setCookie } from "@/utils/cookieUtil.js";
 import ModalContainer from './AccountManagement/ModalContainer.vue';
 
 export default {
   name: 'MainContainer',
   setup() {
-    const loadingStore = LoadingStore();
-    const allMapDataStore = AllMapDataStore();
-    const conformanceStore = ConformanceStore();
-    const pageAdminStore = PageAdminStore();
+    const loadingStore = useLoadingStore();
+    const allMapDataStore = useAllMapDataStore();
+    const conformanceStore = useConformanceStore();
+    const pageAdminStore = usePageAdminStore();
     const { tempFilterId, createFilterId,  temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
     const {  conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
     const router = useRouter();
@@ -65,23 +65,23 @@ export default {
     ModalContainer,
   },
   computed: {
-    ...mapState(PageAdminStore, [
+    ...mapState(usePageAdminStore, [
       'shouldKeepPreviousPage',
       'activePageComputedByRoute'
     ]),
-    ...mapState(LoginStore, [
+    ...mapState(useLoginStore, [
       'isLoggedIn',
       'auth',
     ])
   },
   methods: {
-    ...mapActions(PageAdminStore, [
+    ...mapActions(usePageAdminStore, [
       'copyPendingPageToActivePage',
       'setPreviousPage',
       'clearShouldKeepPreviousPageBoolean',
       'setActivePageComputedByRoute',
     ],),
-    ...mapActions(LoginStore, [
+    ...mapActions(useLoginStore, [
       'refreshToken',
     ],),
   },
@@ -100,7 +100,7 @@ export default {
     //   }
     // }
   async beforeRouteEnter(to, from, next) {
-    const loginStore = LoginStore();
+    const loginStore = useLoginStore();
    
     if (!getCookie("isLuciaLoggedIn")) {  //這裡不要用pinia的isLoggedIn來檢查，因為會有重新整理時撈不到Persisted value的值的bug
       if (getCookie('luciaRefreshToken')) {
diff --git a/src/views/MemberArea/index.vue b/src/views/MemberArea/index.vue
index e8fc4a4..91d9b8e 100644
--- a/src/views/MemberArea/index.vue
+++ b/src/views/MemberArea/index.vue
@@ -12,11 +12,11 @@
 
 <script>
 import { storeToRefs } from 'pinia';
-import loginStore from '@/stores/login';
+import { useLoginStore } from '@/stores/login';
 
 export default {
   setup() {
-    const store = loginStore();
+    const store = useLoginStore();
     const { userData } = storeToRefs(store);
     const { getUserData } = store;
 
diff --git a/src/views/Upload/index.vue b/src/views/Upload/index.vue
index 3d50ae7..63ff56e 100644
--- a/src/views/Upload/index.vue
+++ b/src/views/Upload/index.vue
@@ -79,14 +79,14 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import LoadingStore from '@/stores/loading.js';
-import FilesStore from '@/stores/files.js';
+import { useLoadingStore } from '@/stores/loading.js';
+import { useFilesStore } from '@/stores/files.js';
 import { uploadFailedFirst, uploadSuccess, uploadConfirm } from '@/module/alertModal.js'
 
 export default {
   setup() {
-    const loadingStore = LoadingStore();
-    const filesStore = FilesStore();
+    const loadingStore = useLoadingStore();
+    const filesStore = useFilesStore();
     const { isLoading } = storeToRefs(loadingStore);
     const { uploadDetail, uploadId, uploadFileName } = storeToRefs(filesStore);
 
diff --git a/tests/components/Login.test.js b/tests/components/Login.test.js
index 40abab0..148e7e3 100644
--- a/tests/components/Login.test.js
+++ b/tests/components/Login.test.js
@@ -7,7 +7,7 @@ vi.mock('@/module/apiError.js', () => ({
 }));
 
 import Login from '@/views/Login/Login.vue';
-import loginStore from '@/stores/login.ts';
+import { useLoginStore } from '@/stores/login.ts';
 
 describe('Login', () => {
   let pinia;
@@ -46,7 +46,7 @@ describe('Login', () => {
 
   it('enables login button when both fields have values', async () => {
     const wrapper = mountLogin();
-    const store = loginStore();
+    const store = useLoginStore();
     store.auth.username = 'user';
     store.auth.password = 'pass';
     await wrapper.vm.$nextTick();
@@ -56,7 +56,7 @@ describe('Login', () => {
 
   it('shows error message when isInvalid', async () => {
     const wrapper = mountLogin();
-    const store = loginStore();
+    const store = useLoginStore();
     store.isInvalid = true;
     await wrapper.vm.$nextTick();
     expect(wrapper.text()).toContain('Incorrect account or password');
@@ -64,7 +64,7 @@ describe('Login', () => {
 
   it('toggles password visibility', async () => {
     const wrapper = mountLogin();
-    const store = loginStore();
+    const store = useLoginStore();
     store.auth.password = 'secret';
     await wrapper.vm.$nextTick();
 
@@ -86,7 +86,7 @@ describe('Login', () => {
     const wrapper = mountLogin({
       route: { query: { 'return-to': 'encodedUrl' } },
     });
-    const store = loginStore();
+    const store = useLoginStore();
     expect(store.rememberedReturnToUrl).toBe('encodedUrl');
   });
 });
diff --git a/tests/stores/acctMgmt.test.js b/tests/stores/acctMgmt.test.js
index 6862588..1ff4984 100644
--- a/tests/stores/acctMgmt.test.js
+++ b/tests/stores/acctMgmt.test.js
@@ -16,7 +16,7 @@ vi.mock('@/api/client.js', () => ({
 vi.mock('@/stores/login.ts', () => {
   const { defineStore } = require('pinia');
   return {
-    default: defineStore('loginStore', {
+    useLoginStore: defineStore('loginStore', {
       state: () => ({
         userData: { username: 'currentUser', name: 'Current' },
       }),
@@ -27,7 +27,7 @@ vi.mock('@/stores/login.ts', () => {
   };
 });
 
-import useAcctMgmtStore from '@/stores/acctMgmt.ts';
+import { useAcctMgmtStore } from '@/stores/acctMgmt.ts';
 
 describe('acctMgmtStore', () => {
   let store;
diff --git a/tests/stores/allMapData.test.js b/tests/stores/allMapData.test.js
index 7d8e88d..36bc832 100644
--- a/tests/stores/allMapData.test.js
+++ b/tests/stores/allMapData.test.js
@@ -12,7 +12,7 @@ vi.mock('@/api/client.js', () => ({
   default: { get: mockGet, post: mockPost, put: mockPut },
 }));
 
-import useAllMapDataStore from '@/stores/allMapData.js';
+import { useAllMapDataStore } from '@/stores/allMapData.js';
 
 describe('allMapDataStore', () => {
   let store;
diff --git a/tests/stores/compare.test.js b/tests/stores/compare.test.js
index 2dd14f6..2dd2329 100644
--- a/tests/stores/compare.test.js
+++ b/tests/stores/compare.test.js
@@ -10,7 +10,7 @@ vi.mock('@/api/client.js', () => ({
   default: { get: mockGet },
 }));
 
-import useCompareStore from '@/stores/compare.js';
+import { useCompareStore } from '@/stores/compare.js';
 
 describe('compareStore', () => {
   let store;
diff --git a/tests/stores/conformance.test.js b/tests/stores/conformance.test.js
index ffe89de..64a8c2c 100644
--- a/tests/stores/conformance.test.js
+++ b/tests/stores/conformance.test.js
@@ -13,7 +13,7 @@ vi.mock('@/api/client.js', () => ({
 }));
 
 import apiError from '@/module/apiError.js';
-import useConformanceStore from '@/stores/conformance.js';
+import { useConformanceStore } from '@/stores/conformance.js';
 
 describe('conformanceStore', () => {
   let store;
diff --git a/tests/stores/conformanceInput.test.js b/tests/stores/conformanceInput.test.js
index 16d5c80..318c421 100644
--- a/tests/stores/conformanceInput.test.js
+++ b/tests/stores/conformanceInput.test.js
@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { setActivePinia, createPinia } from 'pinia';
-import useConformanceInputStore from '@/stores/conformanceInput.js';
+import { useConformanceInputStore } from '@/stores/conformanceInput.js';
 
 describe('conformanceInputStore', () => {
   let store;
diff --git a/tests/stores/cytoscapeStore.test.js b/tests/stores/cytoscapeStore.test.js
index 8e62c59..e70b64b 100644
--- a/tests/stores/cytoscapeStore.test.js
+++ b/tests/stores/cytoscapeStore.test.js
@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { setActivePinia, createPinia } from 'pinia';
-import useCytoscapeStore from '@/stores/cytoscapeStore.ts';
+import { useCytoscapeStore } from '@/stores/cytoscapeStore.ts';
 import { SAVE_KEY_NAME } from '@/constants/constants.js';
 
 // Mock localStorage since jsdom's localStorage is limited
diff --git a/tests/stores/files.test.js b/tests/stores/files.test.js
index 63a8ab1..5873fe9 100644
--- a/tests/stores/files.test.js
+++ b/tests/stores/files.test.js
@@ -28,7 +28,7 @@ vi.mock('@/api/client.js', () => ({
   default: { get: mockGet, post: mockPost, put: mockPut, delete: mockDelete },
 }));
 
-import useFilesStore from '@/stores/files.js';
+import { useFilesStore } from '@/stores/files.js';
 
 describe('filesStore', () => {
   let store;
diff --git a/tests/stores/loading.test.js b/tests/stores/loading.test.js
index 7239fff..a3da9f0 100644
--- a/tests/stores/loading.test.js
+++ b/tests/stores/loading.test.js
@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { setActivePinia, createPinia } from 'pinia';
-import useLoadingStore from '@/stores/loading.js';
+import { useLoadingStore } from '@/stores/loading.js';
 
 describe('loadingStore', () => {
   let store;
diff --git a/tests/stores/login.test.js b/tests/stores/login.test.js
index 6595360..53a8c7f 100644
--- a/tests/stores/login.test.js
+++ b/tests/stores/login.test.js
@@ -13,7 +13,7 @@ vi.mock('@/api/client.js', () => ({
   default: { get: mockClientGet },
 }));
 
-import useLoginStore from '@/stores/login.ts';
+import { useLoginStore } from '@/stores/login.ts';
 
 // Mock axios methods (used for signIn/refreshToken which call plain axios)
 vi.spyOn(axios, 'post').mockImplementation(vi.fn());
diff --git a/tests/stores/mapCompareStore.test.js b/tests/stores/mapCompareStore.test.js
index 4edfc7f..92451b8 100644
--- a/tests/stores/mapCompareStore.test.js
+++ b/tests/stores/mapCompareStore.test.js
@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { setActivePinia, createPinia } from 'pinia';
-import useMapCompareStore from '@/stores/mapCompareStore.ts';
+import { useMapCompareStore } from '@/stores/mapCompareStore.ts';
 
 describe('mapCompareStore', () => {
   let store;
diff --git a/tests/stores/mapPathStore.test.js b/tests/stores/mapPathStore.test.js
index b56be6b..c722cbd 100644
--- a/tests/stores/mapPathStore.test.js
+++ b/tests/stores/mapPathStore.test.js
@@ -16,7 +16,7 @@ vi.mock('@/assets/capsule2.svg', () => ({ default: 'cap2' }));
 vi.mock('@/assets/capsule3.svg', () => ({ default: 'cap3' }));
 vi.mock('@/assets/capsule4.svg', () => ({ default: 'cap4' }));
 
-import useMapPathStore from '@/stores/mapPathStore.ts';
+import { useMapPathStore } from '@/stores/mapPathStore.ts';
 
 /**
  * Creates a mock Cytoscape node.
diff --git a/tests/stores/pageAdmin.test.js b/tests/stores/pageAdmin.test.js
index 22afaa7..5e089fd 100644
--- a/tests/stores/pageAdmin.test.js
+++ b/tests/stores/pageAdmin.test.js
@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { setActivePinia, createPinia } from 'pinia';
-import usePageAdminStore from '@/stores/pageAdmin.js';
+import { usePageAdminStore } from '@/stores/pageAdmin.js';
 
 describe('pageAdminStore', () => {
   let store;
diff --git a/tests/stores/performance.test.js b/tests/stores/performance.test.js
index 15525e1..c3f95cd 100644
--- a/tests/stores/performance.test.js
+++ b/tests/stores/performance.test.js
@@ -10,7 +10,7 @@ vi.mock('@/api/client.js', () => ({
   default: { get: mockGet },
 }));
 
-import usePerformanceStore from '@/stores/performance.js';
+import { usePerformanceStore } from '@/stores/performance.js';
 
 describe('performanceStore', () => {
   let store;
diff --git a/tests/views/MainContainerGuard.test.js b/tests/views/MainContainerGuard.test.js
index 7ccdb08..cad18c7 100644
--- a/tests/views/MainContainerGuard.test.js
+++ b/tests/views/MainContainerGuard.test.js
@@ -3,16 +3,16 @@ import { setActivePinia, createPinia } from 'pinia';
 
 // Mock all heavy imports that MainContainer.vue pulls in
 vi.mock('@/stores/loading.js', () => ({
-  default: () => ({ isLoading: false }),
+  useLoadingStore: () => ({ isLoading: false }),
 }));
 vi.mock('@/stores/allMapData.js', () => ({
-  default: () => ({}),
+  useAllMapDataStore: () => ({}),
 }));
 vi.mock('@/stores/conformance.js', () => ({
-  default: () => ({}),
+  useConformanceStore: () => ({}),
 }));
 vi.mock('@/stores/pageAdmin.js', () => ({
-  default: () => ({}),
+  usePageAdminStore: () => ({}),
 }));
 vi.mock('@/module/alertModal.js', () => ({
   leaveFilter: vi.fn(),
@@ -26,7 +26,7 @@ vi.mock('@/router/index.ts', () => ({
 }));
 vi.mock('@/module/cytoscapeMap.js', () => ({}));
 
-import LoginStore from '@/stores/login.ts';
+import { useLoginStore } from '@/stores/login.ts';
 import * as cookieUtil from '@/utils/cookieUtil.js';
 
 // Import the component definition to access beforeRouteEnter
@@ -38,7 +38,7 @@ describe('MainContainer beforeRouteEnter', () => {
 
   beforeEach(() => {
     setActivePinia(createPinia());
-    loginStore = LoginStore();
+    loginStore = useLoginStore();
     loginStore.$router = { push: vi.fn() };
     next = vi.fn();
     vi.clearAllMocks();