pinia、一些注释

package-lock.json

@@ -1084,6 +1084,15 @@
       "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.2.4.tgz",
+      "integrity": "sha512-K7ZhpMY9iJ9ShTC0cR2+PnxdQRuwVIsXDO/WIEV/RnMC/vmSoKDTKW/exNQYPI+4ij10UjXqdNiEHwn47McANQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      }
+    },
     "postcss": {
       "version": "8.4.47",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.47.tgz",

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.7.2",
     "element-plus": "^2.7.5",
     "mitt": "^3.0.1",
+    "pinia": "^2.2.4",
     "querystring": "^0.2.1",
     "vue": "^3.4.21",
     "vue-router": "^4.3.3"

src/main.ts

@@ -5,15 +5,19 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import './assets/gloable.css'
-
+import pinia from './store'
 
 const app = createApp(App)
+//全局注册图标组件
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
-
+//
 app.use(ElementPlus, {size: 'small'})
+//配置路由
 app.use(router)
+//使用pinia
+app.use(pinia)
 app.mount('#app')
 
 

src/store/index.js

@@ -0,0 +1,6 @@
+//导入Pinia
+import { createPinia } from "pinia";
+//创建Pinia示例
+const pinia = createPinia();
+//导出Pinia
+export default pinia

src/store/userStore.js

@@ -0,0 +1,31 @@
+import { defineStore } from "pinia";
+import { myAxios } from '../api/myAxios'
+
+export const userStore = defineStore( 'user' , {
+    //state是应用的核心数据，通常用于管理用户信息、应用设置、数据列表等。
+    state: () => {
+        return {
+            loginUser: {
+                userName: '未登录',
+                userAvatar: '',
+                userRole: 'notLogin'
+            }
+        }
+    },
+    //actions是用于定义和处理状态更改的方法。它们可以包含任意的逻辑，如异步请求、数据处理和状态更新。
+    actions: {
+        //获取登录用户信息
+        async getLoginUser() {
+            //请求登录信息
+            const res = await myAxios.get('接口接口接口')
+            if( res.data.code === 1 && res ?.data ) {
+                this.updateUser( res.data )
+            }
+        },
+        //更新用户信息
+        //更新state
+        updateUser(payLoad) {
+            this.loginUser = payLoad
+        }
+    }
+})

src/views/Commodity/AddProduct.vue

@@ -110,7 +110,7 @@
 import { ref,reactive,onMounted } from 'vue';
 import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
 import type { UploadFile } from 'element-plus';
-import myAxios from "@/api/myAxiso";
+import myAxios from "@/api/myAxios";
 
 const dialogImageUrl = ref('');
 const dialogVisible = ref(false);

src/views/Login.vue

@@ -40,12 +40,15 @@
   import {ref, reactive} from 'vue'
   import { ElMessage } from 'element-plus'
   import {useRouter} from 'vue-router'
-  import myAxios from '@/api/myAxiso';
+  import myAxios from '@/api/myAxios';
+  import { userStore } from '@/store/userStore';
 
   const user = ref({})
   const username = ref('')
   const password = ref('')
   const router = useRouter()
+  const store = userStore()
+
   const Login = async ()=>{
     const res: any = await myAxios.post("/user/login",{
       userAccount: username.value,
@@ -53,6 +56,8 @@
     })
     console.log(res.data.code)
     if(res.data.code === 1 && res ?.data) {
+      //将用户信息放入pinia
+      await store.getLoginUser()
       //存储角色
       await router.replace('/PersonalCenter')
     }

tsconfig.json

@@ -9,3 +9,4 @@
     }
   ]
 }
+