Standardize store exports to named useXxxStore convention

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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();

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 };
   },

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 }

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);

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);

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 }

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 }

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,

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,

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 }

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 }

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);
 

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 }

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);
 

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);
 

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);

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);
 

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';

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 };

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 }

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);

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',

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() {

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>`;
 

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;

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是否儲存過拜訪資訊

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);

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,

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,
   }),

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 檔

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 是活動的開始，還是時間的開始?

src/stores/cytoscapeStore.ts

@@ -23,7 +23,7 @@ interface NodePositions {
 }
 
 
-export default defineStore('useCytoscapeStore', {
+export const useCytoscapeStore = defineStore('cytoscapeStore', {
   state: () => ({
     nodePositions: {} as NodePositions,
     currentGraphId: "",

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 {

src/stores/loading.js

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 
-export default defineStore('loadingStore', {
+export const useLoadingStore = defineStore('loadingStore', {
   state: () => ({
     isLoading: true,
   }),

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: () => ({

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: '',

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();
     },

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',

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,

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);

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';

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';
 

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';
 

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();
 

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);
 

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;

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="，並忽略兩邊的空格。

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;

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;

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() {

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() {
     // 考慮到使用者可能在未登入的情況下貼入一個頁面網址連結過來瀏覽器

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')) {

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;
 

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);