vue web fix

package-lock.json

@@ -11,7 +11,7 @@
         "qs": "^6.11.1",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6",
-        "vuex": "^4.1.0"
+        "vuex": "^4.0.2"
       },
       "devDependencies": {
         "@popperjs/core": "^2.11.6",
@@ -1800,14 +1800,14 @@
       }
     },
     "node_modules/vuex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz",
-      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
       "dependencies": {
         "@vue/devtools-api": "^6.0.0-beta.11"
       },
       "peerDependencies": {
-        "vue": "^3.2.0"
+        "vue": "^3.0.2"
       }
     },
     "node_modules/yallist": {
@@ -3044,9 +3044,9 @@
       }
     },
     "vuex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz",
-      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
       "requires": {
         "@vue/devtools-api": "^6.0.0-beta.11"
       }

package.json

@@ -12,7 +12,7 @@
     "qs": "^6.11.1",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
-    "vuex": "^4.1.0"
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.6",

src/App.vue

@@ -1,11 +1,21 @@
 <script setup>
-import Login from './views/Login.vue'
+import { computed } from 'vue';
+import SuccessMessage from './views/modal/SuccessMessage.vue'
+import store from './utils/vuex/store'
+
+const code = computed(() => { store.state.isLogin })
+const c = computed(() => { code.value })
+
+const message = computed(() => { store.state.successMessage })
+const m = computed(()=>{message.value})
+
 </script>
 
 <template>
   <!-- haeder -->
   <!-- content -->
   <div class="">
+    <SuccessMessage v-model="message" />
     <RouterView />
   </div>
   <!-- footer -->

src/components/util/store.js

@@ -1,16 +0,0 @@
-const state = {
-    isLogin: false,
-    successMessage: ''
-};
-
-const mutations = {
-    login(state) {
-        state.isLogin = true;
-    },
-    logout(state) {
-        state.isLogin = false;
-    },
-    setSuccessMessage(state, message) {
-        state.successMessage = message;
-    }
-};  

src/main.js

@@ -6,11 +6,9 @@ import './scss/styles.scss'
 import "@popperjs/core"
 import "bootstrap"
 import './scss/global.scss'
-// 导入store
-import store from './utils/vuex/m'
 
 const app = createApp(App)
 
+
 app.use(router)
 app.mount('#app')
-app.use(store)

src/router/index.js

@@ -8,7 +8,7 @@ const RoutsList = [
     // 登录界面
     {
         path: '/login',
-        component: () => import('../views/Login.vue'),
+        component: () => import('../views/Login.vue'), 
         hidden: true
     },
     // 错误界面
@@ -20,6 +20,7 @@ const RoutsList = [
     // 管理界面
     {
         path: '/index',
+        name: 'index',
         component: () => import('../views/Index.vue'),
         children: [
             {
@@ -92,6 +93,7 @@ const RoutsList = [
 export const router = VueRouter.createRouter({
     history: VueRouter.createWebHistory(),
     routes: RoutsList
+    
 });
 
 

src/utils/vuex/m.js

@@ -1,19 +0,0 @@
-import { createStore } from "vuex";
-
-// 实例化一个store对象
-
-const store = createStore({
-    state() {
-        return {
-            count: 0
-        }
-    },
-    mutations: {
-        increment(state) {
-            state.count++
-        }
-    }
-})
-
-
-export default store

src/utils/vuex/store.js

@@ -0,0 +1,29 @@
+import { createStore } from 'vuex';
+
+// 实例化一个store对象
+
+const store = createStore({
+    state() {
+        return {
+            isLogin: false,
+            successMessage: ''
+        }
+    },
+    mutations: {
+        login(state) {
+            state.isLogin = true;
+        },
+        logout(state) {
+            state.isLogin = false;
+        },
+        setSuccessMessage(state, message) {
+            state.successMessage = message;
+        }
+    },
+    actions: {
+
+    }
+})
+
+// 将vuex实例出来的store抛出去
+export default store

src/views/Index.vue

@@ -44,7 +44,7 @@
             <!-- content区域 -->
             <div>
                 <div class="tab-content" id="nav-tabContent">
-                    <SuccessMessage/>
+                    <SuccessMessage />
                     <RouterView />
                 </div>
             </div>
@@ -73,7 +73,7 @@ export default {
 
     // 初始化
     created() {
-
+        console.log(this.$route)
     },
 
     mounted() {

src/views/Login.vue

@@ -38,10 +38,9 @@
 </template>
 
 <script>
-import { createDOMCompilerError } from '@vue/compiler-dom'
-import { createApp } from 'vue'
 import request from "../utils/axios/request"
 import qs from "qs"
+import { useStore } from 'vuex';
 
 export default {
     data() {
@@ -51,6 +50,10 @@ export default {
             codeImage: ''
         }
     },
+    setup() {
+        const store = useStore();
+        
+    },
     created() {
         var img = this.$data.codeImage;
         request.get('/captcha', { responseType: 'blob' }).then((response) => {
@@ -70,13 +73,16 @@ export default {
                     'Content-Type': 'application/json'
                 }
             }).then(resp => {
+                // 打印当前请求的对象和响应信息
                 console.log(resp)
-                if (resp.status == 200) {
-                    this.$router.push({
-                        path: '/index',
-                        name: 'access'
-                    })
+                console.log(resp.data.code)
+                console.log(resp.data.msg)
+
+                if (resp.data.code == 200) {
+                    console.log(resp.data.msg)
+                    this.$router.push({ name: 'index' })
                 }
+
             }).catch(error => console.log(error))
         },
         getCode() {