优化数据获取方式

src/pages/ZooAnimal.vue

@@ -3,13 +3,13 @@ import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
 import {Delete, DocumentAdd, Edit, Search} from "@element-plus/icons-vue";
 import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
 import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
+import {mapActions,mapState} from "vuex";
 
 export default {
   name: "ZooAnimal",
   components: {ZooAnimalFormDialog, ZooUserFormDialog},
   data() {
     return {
-      animals: [],
       tableData: [],
       searchInput: {
         state: '',//状态（0正常 1异常）
@@ -38,18 +38,7 @@ export default {
       return Delete
     },
     //endregion
-    // dataFilters() {
+    ...mapState(["animals"])
-    //   // 计算格式化后的数组
-    //   let data = copy(this.tableData)
-    //   data.forEach(e => {
-    //     if (e.state === 0) {
-    //       e.state = '正常'
-    //     } else if (e.state === 1) {
-    //       e.state = '异常'
-    //     }
-    //   })
-    //   return data
-    // },
   },
   watch: {
     searchInput: {
@@ -60,6 +49,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions(["getAnimals"]),
     showEditDialog(animal) {
       //这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
       this.dialog.editData = this.animals.find(e => e.id === animal.id)
@@ -177,23 +167,7 @@ export default {
     },
   },
   mounted() {
-    //数据生成器
+    this.getAnimals()
-    for (let i = 0; i < 100; i++) {
-      let animal = {
-        id: i,
-        name: 'animal' + (i + 3),
-        sex: Math.floor(Math.random() * 2) === 0 ? '雌性' : '雄性',
-        species: Math.floor(Math.random() * 10).toString(),//种类
-        weight: Number((Math.random() * 2000).toFixed(2)),
-        height: Number((Math.random() * 10).toFixed(2)),
-        state: Math.floor(Math.random() * 2),//状态（0正常 1异常）
-        roleId: Math.floor(Math.random() * 100),//饲养员id
-        color: '',//Math.floor(Math.random() * 255),//颜色
-        features: Math.floor(Math.random() * 40).toString(),//特征
-        habit: Math.floor(Math.random() * 500).toString()//生活习性
-      }
-      this.animals.push(animal)
-    }
     this.tableData = copy(this.animals);//复制一份给表格展示
   }
 }

src/pages/ZooLogin.vue

@@ -1,19 +1,23 @@
 <script>
 
-import {mapMutations} from "vuex";
+import {mapMutations,mapState,mapActions} from "vuex";
 
 export default {
   name: "ZooContainer",
   data() {
     return {
       user: {
-        username:'',
+        username: '',
-        password:'123456',
+        password: '123456',
       }
     }
   },
+  computed: {
+    ...mapState(['loginUser'])
+  },
   methods: {
-    ...mapMutations(['updateUserName']),
+    ...mapActions(['getLoginUser']),
+    ...mapMutations(['updateLoginUser']),
     onSubmit() {
       console.log('点击了登录按钮')
       if (!this.user.username || !this.user.password) {
@@ -22,32 +26,22 @@ export default {
           message: '用户名和密码不能为空',
           type: 'warning',
         })
-      } else {
-        //此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
-        //密码错误
-        if (false) {
-          return ElMessage({
-            message: '用户名不存在或密码错误',
-            type: 'error',
-          })
       }
-        //登录成功
+
-        sessionStorage.setItem('isLogin', 'isLogin');//登录状态
+      this.getLoginUser(this.user)//通过表单获取登录的用户
-        localStorage.setItem('userName', this.user.username);//本地存储登录用户名
+      //能获取到登录后的数据，说明登录成功
-        this.updateUserName(this.user.username);//存储登录用户名
+      if (this.loginUser) {
+        localStorage.setItem('username', this.loginUser.username);//本地存储登录用户名
         this.$router.push('/panel/home')
       }
     },
     reset() {
       this.user = {}
     },
-  },
-  computed: {
-
   },
   mounted() {
-    this.updateUserName('');//清空退出登录的用户名
+    this.updateLoginUser('');//清空退出登录的用户
-    this.user.username = localStorage.getItem('userName');//自动填充历史登录的用户
+    this.user.username = localStorage.getItem('username');//自动填充历史登录的用户
   }
 
 }

src/pages/ZooUser.vue

@@ -1,7 +1,8 @@
 <script>
 import {Delete, Edit, Search, User} from "@element-plus/icons-vue";
+import {mapState,mapActions} from "vuex";
 import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
-import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
+import {copy, fuzzyMatching, generateUsers, splitKeyWords} from "@/utils/common.js";
 
 
 export default {
@@ -25,6 +26,7 @@ export default {
 
     // endregion
 
+    ...mapState(["users"])
   },
   watch: {
     searchInput: {
@@ -36,7 +38,6 @@ export default {
   },
   data() {
     return {
-      users: [],//原始用户数据
       tableData: [],//用来显示在界面的数据
       searchInput: {
         auth: '',
@@ -50,6 +51,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions(['getUsers']),
     showEditDialog(user) {
       // console.log('点击了编辑',user)
       //这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
@@ -169,6 +171,7 @@ export default {
       this.tableData = searchResult
     },
     //鼠标悬浮显示密码
+    //region
     showPassword(event,password){
       console.log('showPassword')
       event.target.innerText = password
@@ -176,18 +179,10 @@ export default {
     hidePassword(event) {
       event.target.innerText = '••••••••'
     }
+    //endregion
   },
   mounted() {
-    //数据生成器
+    this.getUsers()//获取用户数据
-    for (let i = 0; i < 100; i++) {
-      let user = {
-        userKey: i,
-        username: 'user' + (i + 3),
-        password: '123456',
-        auth: Math.floor(Math.random() * 3),
-      }
-      this.users.push(user)
-    }
     this.tableData = copy(this.users);//复制一份给表格展示
   }
 }

src/router/index.js

@@ -6,6 +6,7 @@ import ZooPanel from "@/pages/ZooPanel.vue";
 import ZooHome from '../pages/ZooHome.vue'
 import ZooUser from "@/pages/ZooUser.vue";
 import ZooAnimal from "@/pages/ZooAnimal.vue";
+import store from "@/store/index.js";
 
 const router = createRouter({
     history: createWebHashHistory(),
@@ -52,7 +53,7 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
     //判断页面是否需要登录权限才可进入
     if (to.meta.isAuth) {
-        if (!sessionStorage.getItem('isLogin')) {
+        if (!store.state.loginUser.username) {
             router.replace({
                 path: '/login',
             })
@@ -64,4 +65,6 @@ router.beforeEach((to, from, next) => {
     }
 })
 
+
+
 export default router

src/store/index.js

@@ -1,21 +1,57 @@
 import {createStore} from "vuex";
+import {generateAnimals, generateUsers} from "@/utils/common.js";
 
 const actions = {
-
+    //更新登录用户
+    getLoginUser(context, user) {
+        //此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
+        //密码错误
+        if (false) {
+            return ElMessage({
+                message: '用户名不存在或密码错误',
+                type: 'error',
+            })
+        }
+        //登录成功
+        context.commit('updateLoginUser', user);//存储登录用户,这里拉取远程登录的用户作为参数
+    },
+    //获取用户数据
+    getUsers(context) {
+        context.commit('updateUsers', generateUsers())
+    },
+    //获取动物数据
+    getAnimals(context) {
+        context.commit('updateAnimals', generateAnimals())
+    }
 }
 
 const mutations = {
-    //更新已登录用户名
+    //更新已登录的用户
-    updateUserName(state, value) {
+    updateLoginUser(state, value) {
-        state.user.username = value
+        state.loginUser = value
+    },
+    //更新用户集合
+    updateUsers(state, value) {
+        state.users = value
+    },
+    //更新动物集合
+    updateAnimals(state, value) {
+        state.animals = value
     }
 }
 
 const state = {
     //登录用户数据
-    user: {
+    loginUser: {
         username: 'user1',
-    }
+        auth: null
+    },
+    //用户数据
+    users: [],
+    //动物数据
+    animals: [],
+
+
 }
 
 export default createStore({

src/utils/common.js

@@ -1,3 +1,40 @@
+export function generateUsers() {
+    const users = []
+    //数据生成器
+    for (let i = 0; i < 100; i++) {
+        let user = {
+            userKey: i,
+            username: 'user' + (i + 3),
+            password: '123456',
+            auth: Math.floor(Math.random() * 3),
+        }
+        users.push(user)
+    }
+    return users
+}
+
+export function generateAnimals() {
+    const animals = []
+    //数据生成器
+    for (let i = 0; i < 100; i++) {
+        let animal = {
+            id: i,
+            name: 'animal' + (i + 3),
+            sex: Math.floor(Math.random() * 2) === 0 ? '雌性' : '雄性',
+            species: Math.floor(Math.random() * 10).toString(),//种类
+            weight: Number((Math.random() * 2000).toFixed(2)),
+            height: Number((Math.random() * 10).toFixed(2)),
+            state: Math.floor(Math.random() * 2),//状态（0正常 1异常）
+            roleId: Math.floor(Math.random() * 100),//饲养员id
+            color: '',//Math.floor(Math.random() * 255),//颜色
+            features: Math.floor(Math.random() * 40).toString(),//特征
+            habit: Math.floor(Math.random() * 500).toString()//生活习性
+        }
+        animals.push(animal)
+    }
+    return animals
+}
+
 //深拷贝任何值
 export function copy(value) {
     let result = JSON.stringify(value)