ADD: 使用pinia进行状态管理

package-lock.json

@@ -12,6 +12,7 @@
         "@vueuse/integrations": "^10.4.1",
         "axios": "^1.5.0",
         "element-plus": "^2.3.12",
+        "pinia": "^2.1.6",
         "universal-cookie": "^6.1.0",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4",
@@ -1232,6 +1233,50 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.6.tgz",
+      "integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.28",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.28.tgz",

package.json

@@ -13,6 +13,7 @@
     "@vueuse/integrations": "^10.4.1",
     "axios": "^1.5.0",
     "element-plus": "^2.3.12",
+    "pinia": "^2.1.6",
     "universal-cookie": "^6.1.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",

src/main.js

 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
+import { createPinia} from 'pinia'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
-import store from './store'
 import router from './router'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const app = createApp(App)
-app.use(store)
+app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)
 

src/pages/index.vue

+
 <template>
     <div>
         后台首页
-        {{ $store.state.user }}
-        
+        {{ store.user }}
+
+
     </div>
 </template>
 
 <script setup>
+import { useUserStore } from '@/store/user'
+const store = useUserStore()
 
 
 </script>
\ No newline at end of file

src/pages/login.vue

@@ -43,14 +43,16 @@
 
 <script setup>
 import { reactive, ref } from 'vue'
-import { useStore} from 'vuex'
+// import { useStore} from 'vuex'
+import { useUserStore } from '@/store/user'
 import { useRouter } from 'vue-router'
 import { login, getInfo } from '@/api/manager'
 import { setToken } from '@/composeables/auth'
 import { toast } from '@/composeables/util'
 
 
-const store = useStore()
+// const store = useStore()
+const store = useUserStore()
 const router = useRouter()
 
 
@@ -108,7 +110,8 @@ const onSubmit = () => {
                 // 获取管理员信息
                 getInfo()
                     .then(res2 => {
-                        store.commit("SET_USERINFO", res2)
+                        // store.commit("SET_USERINFO", res2)
+                        store.setUser(res2)
                         console.log(res2)
 
                     })

src/store/index.js

-import { createStore } from 'vuex'
-
-
-// 创建一个新的 store 实例
-const store = createStore({
-    state() {
-        return {
-            // 用户信息
-            user:{}
-
-        }
-    },
-    mutations: {
-        // 记录用户信息
-        SET_USERINFO(state, user){
-            state.user = user
-
-        }
-
-    }
-})
-
-
-export default store
\ No newline at end of file

src/store/user.js

+import { defineStore } from 'pinia'
+
+
+export const useUserStore = defineStore('user', {
+    state: () => (
+        {
+            user:{}
+        }
+    ),
+    getters: {
+        getUser: (state) => state.user
+    },
+    actions: {
+        setUser(user) {
+            if (user) {
+                this.user = user
+
+            } else {
+                this.user = {}
+
+            }
+
+        }
+    }
+
+
+})
\ No newline at end of file