rebuilt: base store to pinia

src/components/modules/panel/wrap/TempListWrap.vue

@@ -32,6 +32,7 @@ import useConfirm from '@/common/methods/confirm'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { IGetTempListData } from '@/api/home'
+import useUserStore from '@/store/modules/base/user'
 
 type TState = {
   loading: boolean
@@ -52,6 +53,7 @@ const listRef = ref<HTMLElement | null>(null)
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
+const userStore = useUserStore()
 const state = reactive<TState>({
   loading: false,
   loadDone: false,
@@ -64,8 +66,9 @@ const { tempEditing, dHistoryParams } = useSetupMapGetters(['tempEditing', 'dHis
 
 const pageOptions: TPageOptions = { page: 0, pageSize: 20, cate: 1 }
 const { cate, edit } = route.query
-cate && (pageOptions.cate = (cate as LocationQueryValue) || 1)
+cate && (pageOptions.cate = (cate as LocationQueryValue) ?? 1)
-edit && store.commit('managerEdit', true)
+// edit && store.commit('managerEdit', true)
+edit && userStore.managerEdit(true)
 
 // onMounted(async () => {})
 
@@ -116,7 +119,8 @@ async function selectItem(item: IGetTempListData) {
       return false
     }
   }
-  store.commit('managerEdit', false)
+  // store.commit('managerEdit', false)
+  userStore.managerEdit(false)
   store.commit('setDWidgets', [])
 
   setTempId(item.id)

src/store/index.ts

@@ -1,10 +1,10 @@
 import { createStore } from 'vuex'
 
-import base from './modules/base'
+// import base from './modules/base'
 import design from './modules/design'
 
 export default createStore({
-  ...base,
+  // ...base,
   modules: {
     design,
   },

src/store/modules/base/actions.ts

@@ -2,18 +2,19 @@
  * 异步操作 store.dispatch() 调用
  */
 
-interface Iprops {
+// interface Iprops {
-  commit: (a: any, b: any) => void
+//   commit: (a: any, b: any) => void
-  state: any
+//   state: any
-}
+// }
 
-export default {
+// export default {
-  hideLoading(props: Iprops, data: Type.Object) {
+//   hideLoading(props: Iprops, data: Type.Object) {
-    setTimeout(() => {
+//     setTimeout(() => {
-      props.commit('loading', false)
+//       props.commit('loading', false)
-    }, 600)
+//     }, 600)
-  },
+//   },
-  setFonts(store: Iprops, list: Type.Object) {
+//   setFonts(store: Iprops, list: Type.Object) {
-    store.state.fonts = list
+//     store.state.fonts = list
-  },
+//   },
-}
+  
+// }

src/store/modules/base/index.ts

@@ -2,48 +2,86 @@
  * @Author: ShawnPhang
  * @Date: 2021-12-16 16:20:16
  * @Description:
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2023-09-28 17:42:25
+ * @LastEditTime: 2024-03-17 15:00:00
  */
-import mutations from './mutations'
-import actions from './actions'
-import _config from '@/config'
 
-const all = {
+import { defineStore } from 'pinia'
-  state: {
+
+// import actions from './actions'
+// import _config from '@/config'
+
+type TStoreBaseState = {
+  loading: boolean | null
+  scroll: boolean
+  /** fonts */
+  fonts: string[]
+  /** 抠图服务 */
+  app: string | null
+}
+
+type TUserAction = {
+  hideLoading: () => void
+  setFonts: (list: string[]) => void
+}
+
+const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base', {
+  state: () => ({
     loading: null,
-    online: true, // 登录状态，
-    user: {
-      name: localStorage.getItem('username'),
-    }, // 储存用户信息
     scroll: true,
-    manager: '', // 是否为管理员模式
-    tempEditing: false, // 管理员是否正在编辑模板
     fonts: [], // 缓存字体列表
     app: null, // 抠图服务
-  },
+  }),
-  getters: {
-    online: (state: Type.Object) => {
-      return state.online
-    },
-    user: (state: Type.Object) => {
-      return state.user
-    },
-    manager: (state: Type.Object) => {
-      return state.manager
-    },
-    tempEditing: (state: Type.Object) => {
-      return state.tempEditing
-    },
-    fonts: (state: Type.Object) => {
-      return state.fonts
-    },
-  },
-  mutations: {
-    ...mutations,
-  },
   actions: {
-    ...actions,
+    /** 隐藏loading */
+    hideLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 600)
     },
-}
+    setFonts(list: string[]) {
-export default all
+      this.fonts = list
+    },
+  }
+})
+
+export default useBaseStore
+
+// const all = {
+//   state: {
+//     loading: null,
+//     online: true, // 登录状态，
+//     user: {
+//       name: localStorage.getItem('username'),
+//     }, // 储存用户信息
+//     scroll: true,
+//     manager: '', // 是否为管理员模式
+//     tempEditing: false, // 管理员是否正在编辑模板
+//     fonts: [], // 缓存字体列表
+//     app: null, // 抠图服务
+//   },
+//   getters: {
+//     online: (state: Type.Object) => {
+//       return state.online
+//     },
+//     user: (state: Type.Object) => {
+//       return state.user
+//     },
+//     manager: (state: Type.Object) => {
+//       return state.manager
+//     },
+//     tempEditing: (state: Type.Object) => {
+//       return state.tempEditing
+//     },
+//     fonts: (state: Type.Object) => {
+//       return state.fonts
+//     },
+//   },
+//   mutations: {
+//     ...mutations,
+//   },
+//   actions: {
+//     ...actions,
+//   },
+// }
+

src/store/modules/base/mutations.ts

@@ -8,35 +8,35 @@
 
 // import { Toast } from 'vant'
 
-export default {
+// export default {
-  loading(state: Type.Object, data: any) {
+//   loading(state: Type.Object, data: any) {
-    // Toast.clear();
+//     // Toast.clear();
-    // let msg = ''
+//     // let msg = ''
-    // if (typeof data === 'string') {
+//     // if (typeof data === 'string') {
-    //     msg = data
+//     //     msg = data
-    // } else {
+//     // } else {
-    //     Toast.clear();
+//     //     Toast.clear();
-    //     return false
+//     //     return false
-    // }
+//     // }
-    // Toast.loading({
+//     // Toast.loading({
-    //     duration: 0,       // 持续展示 toast
+//     //     duration: 0,       // 持续展示 toast
-    //     loadingType: 'spinner',
+//     //     loadingType: 'spinner',
-    //     message: msg
+//     //     message: msg
-    // });
+//     // });
-  },
+//   },
-  changeRoute(state: Type.Object, from: string) {
+//   changeRoute(state: Type.Object, from: string) {
-    state.routeFrom = from
+//     state.routeFrom = from
-  },
+//   },
-  changeOnline(state: Type.Object, status: string) {
+//   changeOnline(state: Type.Object, status: string) {
-    state.online = status
+//     state.online = status
-  },
+//   },
-  changeUser(state: Type.Object, name: string) {
+//   changeUser(state: Type.Object, name: string) {
-    state.user.name = name
+//     state.user.name = name
-    // state.user = Object.assign({}, state.user)
+//     // state.user = Object.assign({}, state.user)
-    state.user = { ...state.user }
+//     state.user = { ...state.user }
-    localStorage.setItem('username', name)
+//     localStorage.setItem('username', name)
-  },
+//   },
-  managerEdit(state: Type.Object, status: string) {
+//   managerEdit(state: Type.Object, status: string) {
-    state.tempEditing = status
+//     state.tempEditing = status
-  },
+//   },
-}
+// }

src/store/modules/base/user.ts

@@ -0,0 +1,58 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-17 15:00:00
+ * @Description: User全局状态管理
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-17 15:00:00
+ */
+
+import { defineStore } from "pinia"
+
+type TUserStoreState = {
+  /** 登录状态 */
+  online: boolean
+  /** 储存用户信息 */
+  user: {
+    name: string | null
+  }
+  /**是否为管理员模式 */
+  manager: string
+  /** 管理员是否正在编辑模板 */
+  tempEditing: boolean
+}
+
+type TUserAction = {
+  /** 修改登录状态 */
+  changeOnline: (state: boolean) => void
+  /** 修改登录用户 */
+  changeUser: (userName: string) => void
+  managerEdit: (status: boolean) => void
+}
+
+const useUserStore = defineStore<'userStore', TUserStoreState, {}, TUserAction>('userStore', {
+  state: () => ({
+    online: true, // 登录状态，
+    user: {
+      name: localStorage.getItem('username'),
+    }, // 储存用户信息
+    manager: '', // 是否为管理员模式
+    tempEditing: false, // 管理员是否正在编辑模板
+  }),
+  actions: {
+    changeOnline(status: boolean) {
+      this.online = status
+    },
+    changeUser(name: string) {
+      this.user.name = name
+      // state.user = Object.assign({}, state.user)
+      // state.user = { ...state.user }
+      localStorage.setItem('username', name)
+    },
+    managerEdit(status: boolean) {
+      this.tempEditing = status
+    },
+    
+  }
+})
+
+export default useUserStore

src/utils/axios.ts

@@ -6,8 +6,10 @@
  * @LastEditTime: 2024-02-26 17:54:00
  */
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosStatic } from 'axios'
-import store from '@/store'
+// import store from '@/store'
 import app_config, { LocalStorageKey } from '@/config'
+import useUserStore from '@/store/modules/base/user';
+import useBaseStore from '@/store/modules/base';
 
 axios.defaults.timeout = 30000
 axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
@@ -53,7 +55,8 @@ axios.interceptors.response.use((res: AxiosResponse<any>) => {
     }
     if (res.data.code === 401) {
       console.log('登录失效')
-      store.commit('changeOnline', false)
+      useUserStore().changeOnline(false)
+      // store.commit('changeOnline', false)
     }
 
     if (res.data.result && res.data.code === 200) {
@@ -67,7 +70,8 @@ axios.interceptors.response.use((res: AxiosResponse<any>) => {
   (error) => {
     // if (error.response.status === 401) {
     // }
-    store.dispatch('hideLoading')
+    useBaseStore().hideLoading()
+    // store.dispatch('hideLoading')
     return Promise.reject(error)
   },
 )

src/views/components/HeaderOptions.vue

@@ -12,7 +12,8 @@
       <span style="color: #999; font-size: 14px; margin-right: 0.5rem">{{ state.stateBollean ? '启用' : '停用' }}</span> <el-switch v-model="state.stateBollean" @change="stateChange" />
       <div class="divide__line">|</div>
       <el-button plain type="primary" @click="saveTemp">保存模板</el-button>
-      <el-button @click="$store.commit('managerEdit', false)">取消</el-button>
+      <el-button @click="userStore.managerEdit(false)">取消</el-button>
+      <!-- <el-button @click="$store.commit('managerEdit', false)">取消</el-button> -->
       <div class="divide__line">|</div>
     </template>
     <!-- <el-button @click="draw">绘制(测试)</el-button> -->
@@ -39,6 +40,7 @@ import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import useUserStore from '@/store/modules/base/user'
 
 type TProps = {
   modelValue?: boolean
@@ -60,6 +62,7 @@ const emit = defineEmits<TEmits>()
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
+const userStore = useUserStore()
 const canvasImage = ref<typeof SaveImage | null>(null)
 const {
   dPage, dWidgets, tempEditing, dHistory, dPageHistory