refactor: 重构状态管理代码

src/store/actions.ts

@@ -0,0 +1,50 @@
+import { UnwrapRef } from 'vue'
+import { Language, State } from './state'
+import { i18n } from '@/i18n'
+import { PiniaCustomProperties, _StoreWithGetters, _StoreWithState } from 'pinia'
+import { GlobalType } from './storeID'
+
+/* eslint-disable no-unused-vars */
+export interface Actions {
+  SET_SHOP_LIST(list: any[]): void
+  SET_SELECTED_MODULE(moduleName: string): void
+  SET_LANGUAGE(language: Language): void
+  SET_CURRENT_FLOOR(currentFloor: Record<string, any>): void
+  SET_SHOP(shop: Record<string, any>): void
+  SET_CONFIG(config: Record<string, any>): void
+  SET_IS_USE_FACE(flag: boolean): void
+  SET_IS_USE_SPEECH(flag: boolean): void
+}
+
+type __StoreWithState = _StoreWithState<GlobalType, State, Record<string, any>, Actions>
+type __StoreWithGetters = _StoreWithGetters<Record<string, any>>
+
+type MyThis = Actions & ThisType<Actions & UnwrapRef<State> & __StoreWithState & __StoreWithGetters & PiniaCustomProperties>
+
+export const actions: MyThis = {
+  SET_LANGUAGE(language) {
+    i18n.global.locale = language
+    this.language = language
+  },
+  SET_CONFIG(config) {
+    this.config = config
+  },
+  SET_SHOP_LIST(list) {
+    this.shopList = list
+  },
+  SET_SELECTED_MODULE(moduleName) {
+    this.selectedModule = moduleName
+  },
+  SET_CURRENT_FLOOR(currentFloor) {
+    this.currentFloor = currentFloor
+  },
+  SET_SHOP(shop) {
+    this.shop = shop
+  },
+  SET_IS_USE_FACE(flag) {
+    this.isUseFace = flag
+  },
+  SET_IS_USE_SPEECH(flag) {
+    this.isUseSpeech = flag
+  }
+}

src/store/index.ts

@@ -1,65 +1,9 @@
 import { defineStore } from 'pinia'
-import { i18n } from '@/i18n'
-export type Language = 'zh' | 'en' | 'tw'
+import { state, State } from './state'
+import { Actions, actions } from './actions'
+import { GLOBAL_STORE_ID, GlobalType } from './storeID'
 
-interface State {
-  shopList: any[]
-  selectedModule: string
-  language: Language
-  currentFloor: Record<string, any>
-  shop: Record<string, any>
-  config: Record<string, any>
-  isUseFace: boolean
-  isUseSpeech: boolean
-}
-/* eslint-disable no-unused-vars */
-interface Actions {
-  SET_SHOP_LIST(list: any[]): void
-  SET_SELECTED_MODULE(moduleName: string): void
-  SET_LANGUAGE(language: Language): void
-  SET_CURRENT_FLOOR(currentFloor: Record<string, any>): void
-  SET_SHOP(shop: Record<string, any>): void
-  SET_CONFIG(config: Record<string, any>): void
-  SET_IS_USE_FACE(flag: boolean): void
-  SET_IS_USE_SPEECH(flag: boolean): void
-}
-
-export const useStore = defineStore<string, State, Record<string, any>, Actions>('globalStore', {
-  state: () => ({
-    shopList: [],
-    selectedModule: '',
-    language: 'zh',
-    config: {},
-    shop: {},
-    currentFloor: {},
-    isUseFace: false,
-    isUseSpeech: false
-  }),
-  actions: {
-    SET_LANGUAGE(language) {
-      i18n.global.locale = language
-      this.language = language
-    },
-    SET_CONFIG(config) {
-      this.config = config
-    },
-    SET_SHOP_LIST(list) {
-      this.shopList = list
-    },
-    SET_SELECTED_MODULE(moduleName) {
-      this.selectedModule = moduleName
-    },
-    SET_CURRENT_FLOOR(currentFloor) {
-      this.currentFloor = currentFloor
-    },
-    SET_SHOP(shop) {
-      this.shop = shop
-    },
-    SET_IS_USE_FACE(flag) {
-      this.isUseFace = flag
-    },
-    SET_IS_USE_SPEECH(flag) {
-      this.isUseSpeech = flag
-    }
-  }
+export const useStore = defineStore<GlobalType, State, Record<string, any>, Actions>(GLOBAL_STORE_ID, {
+  state,
+  actions
 })

src/store/state.ts

@@ -0,0 +1,23 @@
+export type Language = 'zh' | 'en' | 'tw'
+
+export interface State {
+  shopList: any[]
+  selectedModule: string
+  language: Language
+  currentFloor: Record<string, any>
+  shop: Record<string, any>
+  config: Record<string, any>
+  isUseFace: boolean
+  isUseSpeech: boolean
+}
+
+export const state = (): State => ({
+  shopList: [],
+  selectedModule: '',
+  language: 'zh',
+  config: {},
+  shop: {},
+  currentFloor: {},
+  isUseFace: false,
+  isUseSpeech: false
+})

src/store/storeID.ts

@@ -0,0 +1,3 @@
+export const GLOBAL_STORE_ID = 'globalStore'
+
+export type GlobalType = typeof GLOBAL_STORE_ID

src/utils/initMapAndMallInfo.ts

@@ -5,36 +5,32 @@ import { getCurrentFloor, getShopList, getFloorsList, getMapErrorLogToSend } fro
 
 type Map = {
   floorOrder: number
-  yaxis: number
-  angle: number
+  yaxis: string
+  angle: string
 }
 
-export const setInitMapAndMallInfo = function () {
-  Promise.all([getCurrentFloor(), getShopList(), getFloorsList()]).then(res => {
-    const [currentFloor, shopList, floorsList] = res
-    const store = useStore()
-
-    store.$patch(state => ({
-      ...state,
-      shopList: shopList.data,
-      currentFloor: currentFloor.data,
-      floorsList: floorsList.data
-    }))
-
-    //初始化地图
-    onReady(currentFloor.data as Map, () => {
-      const facilityList = (window as any).Map_QM.getAllIcon().flat(Infinity)
-
-      const list = facilityList.map((item: { imgUrl: string }) => {
-        item.imgUrl.replace('./', '/')
-        return item
-      })
-
-      ;(window as any).Map_QM.addEventListener('shop', onClickShop, false)
+export const setInitMapAndMallInfo = async function () {
+  const res = await Promise.all([getCurrentFloor(), getShopList(), getFloorsList()])
+  const [currentFloor, shopList, floorsList] = res
+  const store = useStore()
+  store.$patch(state => ({
+    ...state,
+    shopList: shopList.data,
+    currentFloor: currentFloor.data,
+    floorsList: floorsList.data
+  }))
+  //初始化地图
+  onReady(currentFloor.data as Map, () => {
+    const facilityList = (window as any).Map_QM.getAllIcon().flat(Infinity)
 
-      store.SET_FACILITY_LIST(uniqBy(list, 'type'))
-      ;(window as any).Map_QM.renderer.domElement.addEventListener('webglcontextlost', onContextLost)
+    const list = facilityList.map((item: { imgUrl: string }) => {
+      item.imgUrl.replace('./', '/')
+      return item
     })
+    ;(window as any).Map_QM.addEventListener('shop', onClickShop, false)
+
+    store.SET_FACILITY_LIST(uniqBy(list, 'type'))
+    ;(window as any).Map_QM.renderer.domElement.addEventListener('webglcontextlost', onContextLost)
   })
 }