From fe3834916a55bfb03ddb8a5fd04928d4549b631c Mon Sep 17 00:00:00 2001
From: D <3066417822@qq.com>
Date: Tue, 12 Dec 2023 14:10:03 +0800
Subject: [PATCH] =?UTF-8?q?pinia=E6=9B=BF=E6=8D=A2vuex?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                               |   3 +-
 src/pages/login.vue                       |   3 +-
 src/pages_mine/pages/avatar/index.vue     |   9 +-
 src/pages_mine/pages/setting/index.vue    | 129 ++++++++++---------
 src/pages_template/pages/login/index2.vue |   6 +-
 src/plugins/auth.ts                       |  71 ++++++-----
 src/store/modules/user.ts                 | 143 ++++++++++++----------
 src/utils/permission.ts                   |   6 +-
 src/utils/request.ts                      |   4 +-
 src/utils/upload.ts                       |   5 +-
 10 files changed, 195 insertions(+), 184 deletions(-)

diff --git a/src/main.js b/src/main.js
index ec5efd5..be6738f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,9 +13,10 @@ import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, select
 
 export function createApp() {
   const app = createSSRApp(App)
+  app.use(store)
   app.use(uviewPlus)
   app.use(plugins)
-  app.use(store)
+  
 
   // 全局方法挂载
   app.config.globalProperties.useDict = useDict
diff --git a/src/pages/login.vue b/src/pages/login.vue
index 2741633..d9ec0ad 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -40,6 +40,7 @@ import { getCodeImg } from '@/api/login'
 import { ref } from "vue";
 import config from '@/config.js'
 import useUserStore from '@/store/modules/user'
+const userStore = useUserStore()
 const codeUrl = ref("");
 const captchaEnabled = ref(true);
 const globalConfig = ref(config);
@@ -49,7 +50,7 @@ const loginForm = ref({
   code: "",
   uuid: ''
 });
-const userStore = useUserStore()
+
 
 // 获取图形验证码
 function getCode() {
diff --git a/src/pages_mine/pages/avatar/index.vue b/src/pages_mine/pages/avatar/index.vue
index b5cd84e..0ddee4f 100644
--- a/src/pages_mine/pages/avatar/index.vue
+++ b/src/pages_mine/pages/avatar/index.vue
@@ -51,8 +51,9 @@
 
 <script>
 import config from '@/config'
-import store from "@/store"
 import { uploadAvatar } from "@/api/system/user"
+import useUserStore from '@/store/modules/user'
+const userStore = useUserStore()
 
 const baseUrl = config.baseUrl
 let sysInfo = uni.getSystemInfoSync()
@@ -81,7 +82,7 @@ export default {
 	 */
 	data() {
 		return {
-			imageSrc: store.getters.avatar,
+			imageSrc: userStore.avatar,
 			isShowImg: false,
 			// 初始化的宽高
 			cropperInitW: SCREEN_WIDTH,
@@ -270,9 +271,9 @@ export default {
 						uni.hideLoading()
 						let data = { name: 'avatarfile', filePath: res.tempFilePath }
 						uploadAvatar(data).then(response => {
-							//store.commit('SET_AVATAR', response.imgUrl)
+							// userStore.avatar =  response.imgUrl
 							/*cloud*/
-							store.commit('SET_AVATAR', baseUrl + response.imgUrl)
+							userStore.avatar = baseUrl + response.imgUrl
 							uni.showToast({ title: "修改成功", icon: 'success' })
 							uni.$emit('refresh');
 							uni.navigateBack();
diff --git a/src/pages_mine/pages/setting/index.vue b/src/pages_mine/pages/setting/index.vue
index a9254ff..4504f17 100644
--- a/src/pages_mine/pages/setting/index.vue
+++ b/src/pages_mine/pages/setting/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="setting-container" :style="{height: `${windowHeight}px`}">
+  <view class="setting-container" :style="{ height: `${windowHeight}px` }">
     <view class="menu-list">
       <view class="list-cell list-cell-arrow" @click="handleToPwd">
         <view class="menu-item-box">
@@ -29,77 +29,76 @@
     </view>
   </view>
   <view>
-  	  <uni-popup ref="popup" type="dialog">
-  	    <uni-popup-dialog type="info" cancelText="关闭" confirmText="退出"
-  	                      title="通知" content="确定注销并退出系统吗" 
-  	    				  @confirm="dialogConfirm"
-  	                      @close="dialogClose">
-  	    </uni-popup-dialog>
-  	  </uni-popup>
+    <uni-popup ref="popup" type="dialog">
+      <uni-popup-dialog type="info" cancelText="关闭" confirmText="退出" title="通知" content="确定注销并退出系统吗"
+        @confirm="dialogConfirm" @close="dialogClose">
+      </uni-popup-dialog>
+    </uni-popup>
   </view>
 </template>
 
 <script setup>
-  import { ref } from "vue";
-  import store from '@/store'
-  
-  const windowHeight=ref(uni.getSystemInfoSync().windowHeight) ;
-  const popup = ref(null);
-  
-  function handleToPwd() {
-	  uni.navigateTo({
-	  	url: '/pages/mine/pwd/index'
-	  });
-  };
-  
-  function handleToUpgrade() {
-	  uni.showToast({
-	    title: '模块建设中~',
-	    mask: false,
-	  	icon:"none",
-	    duration: 1000
-	  });
-  };
-  
-  function handleCleanTmp() {
-    uni.showToast({
-      title: '模块建设中~',
-      mask: false,
-    	icon:"none",
-      duration: 1000
+import { ref } from "vue";
+import useUserStore from '@/store/modules/user'
+const userStore = useUserStore()
+
+const windowHeight = ref(uni.getSystemInfoSync().windowHeight);
+const popup = ref(null);
+
+function handleToPwd() {
+  uni.navigateTo({
+    url: '/pages/mine/pwd/index'
+  });
+};
+
+function handleToUpgrade() {
+  uni.showToast({
+    title: '模块建设中~',
+    mask: false,
+    icon: "none",
+    duration: 1000
+  });
+};
+
+function handleCleanTmp() {
+  uni.showToast({
+    title: '模块建设中~',
+    mask: false,
+    icon: "none",
+    duration: 1000
+  });
+};
+function handleLogout() {
+  popup.value.open();
+};
+function dialogConfirm() {
+  //console.log('----------------点击确认------------')
+  userStore.logOut().then(() => {
+    uni.reLaunch({
+      url: '/pages/login'
     });
-  };
-  function handleLogout() {
-  	  popup.value.open();
-  };
-  function dialogConfirm() {
-  	//console.log('----------------点击确认------------')
-  	store.dispatch('LogOut').then(() => {
-  			uni.reLaunch({
-  				url: '/pages/login'
-  			});
-  	})
-  };
-  function dialogClose() {
-  	//console.log('点击关闭')
-  };
+  })
+};
+function dialogClose() {
+  //console.log('点击关闭')
+};
 </script>
 
 <style lang="scss" scoped>
-  .page {
-    background-color: #f8f8f8;
-  }
+.page {
+  background-color: #f8f8f8;
+}
 
-  .item-box {
-    background-color: #FFFFFF;
-    margin: 30rpx;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    padding: 10rpx;
-    border-radius: 8rpx;
-    color: #303133;
-    font-size: 32rpx;
-  }
+.item-box {
+  background-color: #FFFFFF;
+  margin: 30rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 10rpx;
+  border-radius: 8rpx;
+  color: #303133;
+  font-size: 32rpx;
+}
 </style>
diff --git a/src/pages_template/pages/login/index2.vue b/src/pages_template/pages/login/index2.vue
index 8e80287..489caa8 100644
--- a/src/pages_template/pages/login/index2.vue
+++ b/src/pages_template/pages/login/index2.vue
@@ -71,7 +71,7 @@
 </template>
   
 <script>
-
+import useUserStore from '@/store/modules/user'
 export default {
 	data() {
 		return {
@@ -154,7 +154,7 @@ export default {
 		},
 		// 密码登录
 		async pwdLogin() {
-			this.$store.dispatch('Login', this.loginForm).then(() => {
+			useUserStore().login(this.loginForm).then(() => {
 				this.$modal.closeLoading()
 				this.loginSuccess()
 			}).catch(() => {
@@ -166,7 +166,7 @@ export default {
 		// 登录成功后，处理函数
 		loginSuccess(result) {
 			// 设置用户信息
-			this.$store.dispatch('GetInfo').then(res => {
+			useUserStore().getInfo().then(res => {
 				this.$tab.reLaunch('/pages/index')
 			})
 		}
diff --git a/src/plugins/auth.ts b/src/plugins/auth.ts
index bb33a85..ebf8bf4 100644
--- a/src/plugins/auth.ts
+++ b/src/plugins/auth.ts
@@ -1,26 +1,25 @@
-import store from '@/store'
-
+import useUserStore from "@/store/modules/user";
 function authPermission(permission: string): boolean {
-  const all_permission = "*:*:*"
-  const permissions: Array<string> = store.getters && store.getters.permissions
+  const all_permission = "*:*:*";
+  const permissions: Array<string> = useUserStore().permissions;
   if (permission && permission.length > 0) {
-    return permissions.some(v => {
-      return all_permission === v || v === permission
-    })
+    return permissions.some((v) => {
+      return all_permission === v || v === permission;
+    });
   } else {
-    return false
+    return false;
   }
 }
 
 function authRole(role: string): boolean {
-  const super_admin = "admin"
-  const roles: Array<string> = store.getters && store.getters.roles
+  const super_admin = "admin";
+  const roles: Array<string> = useUserStore().roles;
   if (role && role.length > 0) {
-    return roles.some(v => {
-      return super_admin === v || v === role
-    })
+    return roles.some((v) => {
+      return super_admin === v || v === role;
+    });
   } else {
-    return false
+    return false;
   }
 }
 
@@ -28,57 +27,57 @@ export default {
   /**
    * 验证用户是否具备某权限
    * @param permission 权限符
-   * @returns 
+   * @returns
    */
   hasPermi(permission: string): boolean {
-    return authPermission(permission)
+    return authPermission(permission);
   },
   /**
    * 验证用户是否含有指定权限，只需包含其中一个
    * @param permissions 权限符数组
-   * @returns 
+   * @returns
    */
   hasPermiOr(permissions: Array<string>): boolean {
-    return permissions.some(item => {
-      return authPermission(item)
-    })
+    return permissions.some((item) => {
+      return authPermission(item);
+    });
   },
   /**
    * 验证用户是否含有指定权限，必须全部拥有
    * @param permissions 权限符数组
-   * @returns 
+   * @returns
    */
   hasPermiAnd(permissions: Array<string>): boolean {
-    return permissions.every(item => {
-      return authPermission(item)
-    })
+    return permissions.every((item) => {
+      return authPermission(item);
+    });
   },
   /**
    * 验证用户是否具备某角色
    * @param role 角色
-   * @returns 
+   * @returns
    */
   hasRole(role: string): boolean {
-    return authRole(role)
+    return authRole(role);
   },
   /**
    * 验证用户是否含有指定角色，只需包含其中一个
    * @param roles 角色数组
-   * @returns 
+   * @returns
    */
   hasRoleOr(roles: Array<string>): boolean {
-    return roles.some(item => {
-      return authRole(item)
-    })
+    return roles.some((item) => {
+      return authRole(item);
+    });
   },
   /**
    * 验证用户是否含有指定角色，必须全部拥有
    * @param roles 角色数组
-   * @returns 
+   * @returns
    */
   hasRoleAnd(roles: Array<string>): boolean {
-    return roles.every(item => {
-      return authRole(item)
-    })
-  }
-}
+    return roles.every((item) => {
+      return authRole(item);
+    });
+  },
+};
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 2af5908..cf27e42 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -1,80 +1,89 @@
-import { login, logout, getInfo } from '@/api/login'
-import { getToken, setToken, removeToken } from '@/utils/auth'
-import defAva from '@/static/images/profile.jpg'
-import { defineStore } from 'pinia'
+import { login, logout, getInfo } from "@/api/login";
+import { getToken, setToken, removeToken } from "@/utils/auth";
+import defAva from "@/static/images/profile.jpg";
+import { defineStore } from "pinia";
 
 export interface LoginForm {
-  username: string
-  password: string
-  code: string
-  uuid: string
+  username: string;
+  password: string;
+  code: string;
+  uuid: string;
 }
 
-
-const useUserStore = defineStore(
-  'user',
-  {
-    state: () => ({
-      token: getToken(),
-      name: '',
-      avatar: '',
-      roles: Array(),
-      permissions: []
-    }),
-    actions: {
-      // 登录
-      login(userInfo: LoginForm) {
-        const username = userInfo.username.trim()
-        const password = userInfo.password
-        const code = userInfo.code
-        const uuid = userInfo.uuid
-        return new Promise((resolve, reject) => {
-          login(username, password, code, uuid).then((res:any) => {
-            setToken(res.token)
-            this.token = res.token
-            resolve(null)
-          }).catch(error => {
-            reject(error)
+const useUserStore = defineStore("user", {
+  state: () => ({
+    token: getToken(),
+    name: "",
+    avatar: "",
+    roles: Array(),
+    permissions: [],
+  }),
+  actions: {
+    // 登录
+    login(userInfo: LoginForm) {
+      const username = userInfo.username.trim();
+      const password = userInfo.password;
+      const code = userInfo.code;
+      const uuid = userInfo.uuid;
+      return new Promise((resolve, reject) => {
+        login(username, password, code, uuid)
+          .then((res: any) => {
+            setToken(res.token);
+            this.token = res.token;
+            resolve(null);
           })
-        })
-      },
-      // 获取用户信息
-      getInfo() {
-        return new Promise((resolve, reject) => {
-          getInfo().then((res:any) => {
-            const user = res.user
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    // 获取用户信息
+    getInfo() {
+      return new Promise((resolve, reject) => {
+        getInfo()
+          .then((res: any) => {
+            const user = res.user;
             // @ts-ignore
-            const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
+            const avatar =
+              user.avatar == "" || user.avatar == null
+                ? defAva
+                : import.meta.env.VITE_APP_BASE_API + user.avatar;
 
-            if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-              this.roles = res.roles
-              this.permissions = res.permissions
+            if (res.roles && res.roles.length > 0) {
+              // 验证返回的roles是否是一个非空数组
+              this.roles = res.roles;
+              this.permissions = res.permissions;
             } else {
-              this.roles = ['ROLE_DEFAULT']
+              this.roles = ["ROLE_DEFAULT"];
             }
-            this.name = user.userName
+            this.name = user.userName;
             this.avatar = avatar;
-            resolve(res)
-          }).catch(error => {
-            reject(error)
+            resolve(res);
           })
-        })
-      },
-      // 退出系统
-      logOut() {
-        return new Promise((resolve, reject) => {
-          logout().then(() => {
-            this.token = ''
-            this.roles = []
-            this.permissions = []
-            removeToken()
-            resolve(null)
-          }).catch(error => {
-            reject(error)
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    // 退出系统
+    logOut() {
+      return new Promise((resolve, reject) => {
+        logout()
+          .then(() => {
+            this.token = "";
+            this.roles = [];
+            this.permissions = [];
+            this.name = "";
+            this.avatar = "";
+            removeToken();
+            resolve(null);
           })
-        })
-      }
-    }
-  })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+  },
+});
 
-export default useUserStore
+export default useUserStore;
diff --git a/src/utils/permission.ts b/src/utils/permission.ts
index d7759d9..3d6c5cd 100644
--- a/src/utils/permission.ts
+++ b/src/utils/permission.ts
@@ -1,4 +1,4 @@
-import store from '@/store'
+import useUserStore from '@/store/modules/user'
 
 /**
  * 字符权限校验
@@ -7,7 +7,7 @@ import store from '@/store'
  */
 export function checkPermi(value:Array<string>) {
   if (value && value instanceof Array && value.length > 0) {
-    const permissions:Array<string> = store.getters && store.getters.permissions
+    const permissions:Array<string> = useUserStore().permissions
     const permissionDatas = value
     const all_permission = "*:*:*"
 
@@ -32,7 +32,7 @@ export function checkPermi(value:Array<string>) {
  */
 export function checkRole(value:Array<string>) {
   if (value && value instanceof Array && value.length > 0) {
-    const roles:Array<string> = store.getters && store.getters.roles
+    const roles:Array<string> = useUserStore().roles
     const permissionRoles = value
     const super_admin = "admin"
 
diff --git a/src/utils/request.ts b/src/utils/request.ts
index c3c3711..2362618 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,9 +1,9 @@
-import store from '@/store'
 import config from '@/config'
 import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
 import { toast, showConfirm, tansParams } from '@/utils/common'
 import { RequestConfig, ResponseData } from '@/types/request'
+import useUserStore from '@/store/modules/user'
 
 let timeout = 10000
 const baseUrl = config.baseUrl
@@ -44,7 +44,7 @@ const request = <T>(config:RequestConfig):Promise<ResponseData<T>> => {
       if (code === 401) {
         showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
           if (res.confirm) {
-            store.dispatch('LogOut').then(res => {
+            useUserStore().logOut().then(res => {
               uni.reLaunch({ url: '/pages/login' })
             })
           }
diff --git a/src/utils/upload.ts b/src/utils/upload.ts
index b7167cf..d1183b3 100644
--- a/src/utils/upload.ts
+++ b/src/utils/upload.ts
@@ -1,9 +1,10 @@
-import store from '@/store'
 import config from '@/config'
 import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
 import { toast, showConfirm, tansParams } from '@/utils/common'
 import { ResponseData, RequestUploadConfig } from '@/types/request'
+import useUserStore from '@/store/modules/user'
+const userStore = useUserStore()
 
 let timeout = 10000
 const baseUrl = config.baseUrl
@@ -39,7 +40,7 @@ const upload = <T>(config:RequestUploadConfig):Promise<ResponseData<T>> => {
           } else if (code == 401) {
             showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(res => {
               if (res.confirm) {
-                store.dispatch('LogOut').then(res => {
+                userStore.logOut().then(res => {
                   uni.reLaunch({ url: '/pages/login' })
                 })
               }