pinia替换vuex

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

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

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

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 ref="popup" type="dialog">
-  	    <uni-popup-dialog type="info" cancelText="关闭" confirmText="退出"
+      <uni-popup-dialog type="info" cancelText="关闭" confirmText="退出" title="通知" content="确定注销并退出系统吗"
-  	                      title="通知" content="确定注销并退出系统吗" 
+        @confirm="dialogConfirm" @close="dialogClose">
-  	    				  @confirm="dialogConfirm"
+      </uni-popup-dialog>
-  	                      @close="dialogClose">
+    </uni-popup>
-  	    </uni-popup-dialog>
-  	  </uni-popup>
   </view>
 </template>
 
 <script setup>
-  import { ref } from "vue";
+import { ref } from "vue";
-  import store from '@/store'
+import useUserStore from '@/store/modules/user'
+const userStore = useUserStore()
 
-  const windowHeight=ref(uni.getSystemInfoSync().windowHeight) ;
+const windowHeight = ref(uni.getSystemInfoSync().windowHeight);
-  const popup = ref(null);
+const popup = ref(null);
 
-  function handleToPwd() {
+function handleToPwd() {
-	  uni.navigateTo({
+  uni.navigateTo({
-	  	url: '/pages/mine/pwd/index'
+    url: '/pages/mine/pwd/index'
-	  });
+  });
-  };
+};
 
-  function handleToUpgrade() {
+function handleToUpgrade() {
-	  uni.showToast({
+  uni.showToast({
-	    title: '模块建设中~',
+    title: '模块建设中~',
-	    mask: false,
+    mask: false,
-	  	icon:"none",
+    icon: "none",
-	    duration: 1000
+    duration: 1000
-	  });
+  });
-  };
+};
 
-  function handleCleanTmp() {
+function handleCleanTmp() {
-    uni.showToast({
+  uni.showToast({
-      title: '模块建设中~',
+    title: '模块建设中~',
-      mask: false,
+    mask: false,
-    	icon:"none",
+    icon: "none",
-      duration: 1000
+    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 dialogClose() {
-  };
+  //console.log('点击关闭')
-  function dialogConfirm() {
+};
-  	//console.log('----------------点击确认------------')
-  	store.dispatch('LogOut').then(() => {
-  			uni.reLaunch({
-  				url: '/pages/login'
-  			});
-  	})
-  };
-  function dialogClose() {
-  	//console.log('点击关闭')
-  };
 </script>
 
 <style lang="scss" scoped>
-  .page {
+.page {
-    background-color: #f8f8f8;
+  background-color: #f8f8f8;
-  }
+}
 
-  .item-box {
+.item-box {
-    background-color: #FFFFFF;
+  background-color: #FFFFFF;
-    margin: 30rpx;
+  margin: 30rpx;
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
-    padding: 10rpx;
+  padding: 10rpx;
-    border-radius: 8rpx;
+  border-radius: 8rpx;
-    color: #303133;
+  color: #303133;
-    font-size: 32rpx;
+  font-size: 32rpx;
-  }
+}
 </style>

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

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 all_permission = "*:*:*";
-  const permissions: Array<string> = store.getters && store.getters.permissions
+  const permissions: Array<string> = useUserStore().permissions;
   if (permission && permission.length > 0) {
-    return permissions.some(v => {
+    return permissions.some((v) => {
-      return all_permission === v || v === permission
+      return all_permission === v || v === permission;
-    })
+    });
   } else {
-    return false
+    return false;
   }
 }
 
 function authRole(role: string): boolean {
-  const super_admin = "admin"
+  const super_admin = "admin";
-  const roles: Array<string> = store.getters && store.getters.roles
+  const roles: Array<string> = useUserStore().roles;
   if (role && role.length > 0) {
-    return roles.some(v => {
+    return roles.some((v) => {
-      return super_admin === v || v === role
+      return super_admin === v || v === role;
-    })
+    });
   } else {
-    return false
+    return false;
   }
 }
 
@@ -31,7 +30,7 @@ export default {
    * @returns
    */
   hasPermi(permission: string): boolean {
-    return authPermission(permission)
+    return authPermission(permission);
   },
   /**
    * 验证用户是否含有指定权限，只需包含其中一个
@@ -39,9 +38,9 @@ export default {
    * @returns
    */
   hasPermiOr(permissions: Array<string>): boolean {
-    return permissions.some(item => {
+    return permissions.some((item) => {
-      return authPermission(item)
+      return authPermission(item);
-    })
+    });
   },
   /**
    * 验证用户是否含有指定权限，必须全部拥有
@@ -49,9 +48,9 @@ export default {
    * @returns
    */
   hasPermiAnd(permissions: Array<string>): boolean {
-    return permissions.every(item => {
+    return permissions.every((item) => {
-      return authPermission(item)
+      return authPermission(item);
-    })
+    });
   },
   /**
    * 验证用户是否具备某角色
@@ -59,7 +58,7 @@ export default {
    * @returns
    */
   hasRole(role: string): boolean {
-    return authRole(role)
+    return authRole(role);
   },
   /**
    * 验证用户是否含有指定角色，只需包含其中一个
@@ -67,9 +66,9 @@ export default {
    * @returns
    */
   hasRoleOr(roles: Array<string>): boolean {
-    return roles.some(item => {
+    return roles.some((item) => {
-      return authRole(item)
+      return authRole(item);
-    })
+    });
   },
   /**
    * 验证用户是否含有指定角色，必须全部拥有
@@ -77,8 +76,8 @@ export default {
    * @returns
    */
   hasRoleAnd(roles: Array<string>): boolean {
-    return roles.every(item => {
+    return roles.every((item) => {
-      return authRole(item)
+      return authRole(item);
-    })
+    });
-  }
+  },
-}
+};

src/store/modules/user.ts

@@ -1,80 +1,89 @@
-import { login, logout, getInfo } from '@/api/login'
+import { login, logout, getInfo } from "@/api/login";
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { getToken, setToken, removeToken } from "@/utils/auth";
-import defAva from '@/static/images/profile.jpg'
+import defAva from "@/static/images/profile.jpg";
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
 
 export interface LoginForm {
-  username: string
+  username: string;
-  password: string
+  password: string;
-  code: string
+  code: string;
-  uuid: string
+  uuid: string;
 }
 
-
+const useUserStore = defineStore("user", {
-const useUserStore = defineStore(
+  state: () => ({
-  'user',
+    token: getToken(),
-  {
+    name: "",
-    state: () => ({
+    avatar: "",
-      token: getToken(),
+    roles: Array(),
-      name: '',
+    permissions: [],
-      avatar: '',
+  }),
-      roles: Array(),
+  actions: {
-      permissions: []
+    // 登录
-    }),
+    login(userInfo: LoginForm) {
-    actions: {
+      const username = userInfo.username.trim();
-      // 登录
+      const password = userInfo.password;
-      login(userInfo: LoginForm) {
+      const code = userInfo.code;
-        const username = userInfo.username.trim()
+      const uuid = userInfo.uuid;
-        const password = userInfo.password
+      return new Promise((resolve, reject) => {
-        const code = userInfo.code
+        login(username, password, code, uuid)
-        const uuid = userInfo.uuid
+          .then((res: any) => {
-        return new Promise((resolve, reject) => {
+            setToken(res.token);
-          login(username, password, code, uuid).then((res:any) => {
+            this.token = res.token;
-            setToken(res.token)
+            resolve(null);
-            this.token = res.token
-            resolve(null)
-          }).catch(error => {
-            reject(error)
           })
-        })
+          .catch((error) => {
-      },
+            reject(error);
-      // 获取用户信息
+          });
-      getInfo() {
+      });
-        return new Promise((resolve, reject) => {
+    },
-          getInfo().then((res:any) => {
+    // 获取用户信息
-            const user = res.user
+    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是否是一个非空数组
+            if (res.roles && res.roles.length > 0) {
-              this.roles = res.roles
+              // 验证返回的roles是否是一个非空数组
-              this.permissions = res.permissions
+              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)
+            resolve(res);
-          }).catch(error => {
-            reject(error)
           })
-        })
+          .catch((error) => {
-      },
+            reject(error);
-      // 退出系统
+          });
-      logOut() {
+      });
-        return new Promise((resolve, reject) => {
+    },
-          logout().then(() => {
+    // 退出系统
-            this.token = ''
+    logOut() {
-            this.roles = []
+      return new Promise((resolve, reject) => {
-            this.permissions = []
+        logout()
-            removeToken()
+          .then(() => {
-            resolve(null)
+            this.token = "";
-          }).catch(error => {
+            this.roles = [];
-            reject(error)
+            this.permissions = [];
+            this.name = "";
+            this.avatar = "";
+            removeToken();
+            resolve(null);
           })
-        })
+          .catch((error) => {
-      }
+            reject(error);
-    }
+          });
-  })
+      });
+    },
+  },
+});
 
-export default useUserStore
+export default useUserStore;

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"
 

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

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