- 把展开收起放到个人中心 - 个人信息交给vuex管理【重点】 - 安装vue辅助工具 - axios-工具层-持续优化【掌握】 - loading效果的制作

本文链接：https://blog.csdn.net/quanmeiren/article/details/130998170

vuex

状态管理工具。只能用于vue项目。特点如下：

集中式的管理项目的状态（数据）
所有组件可以无视层级，直接从仓库里面拿数据（计算属性）
所有组件可以修改仓库里面的数据，然后依赖于这个数据的组件会更新

五大核心

state【状态，数据】
mutations：提交一个mutation
getters：数据的二次处理【类似于计算属性，基于state派生出一些新的属性】
- 例子：仓库里面保存了一个学生列表（年龄），我要20岁以上的学生
actions
- action和mutation都是用来改变state数据
- action它本身不能该state的数据，通过提交mutation更改数据
- action里面可以处理异步代码
modules
- 防止store/index.js代码过多（解耦！！！）
- 命名空间：防止模块之间选项重名

思路：

让菜单和所有的开关（个人中心）关联到同一个数据（vuex）

在vuex里面定义这个数据（state， mutation）

export default new Vuex.Store({
  state: {
    iscollapse: true
  },
  mutations: {
    M_iscollapse(state, payload) {
      state.iscollapse = payload
    }
  },
})

让个人中心里面的开关，关联到vuex中的iscollapse

个人中心里面拿到iscollapse

个人中心里面的开关变化，iscollapse跟着变

<el-switch @change="switchChange" :value="iscollapse" :active-value="false" :inactive-value="true"></el-switch>


switchChange(val) {
      this.$store.commit('M_iscollapse', val)
    },

computed: {
    iscollapse() {
      return this.$store.state.iscollapse
    }
  }

让菜单页绑定仓库里面的iscollapse

 <el-switch :value="iscollapse"  @change="switchChange" :active-value="false" :inactive-value="true"></el-switch>
// data() {
  //   return {
  //     // true : 收起   false 展开
  //     iscollapse: true
  //   };
  // },

switchChange(val) {
      this.$store.commit('M_iscollapse', val)
    },

  computed: {
    iscollapse() {
      return this.$store.state.iscollapse
    }
  },

把个人信息交给vuex管理【重点！！！】

创建一个用户仓库模块

export default {
    namespaced: true,
    state: {
        userInfo: null
    },
    mutations: {
        M_userInfo(state, payload) {
            state.userInfo = payload
        }
    }，
    actions: {
        A_userInfo({commit}, payload) {
            userInfoApi().then(res => {
                commit('M_userInfo', res.data)
            })
        }
    }
}

store/module/user.js

注册该模块，注册好了之后，在工具里面看一下

import user from './module/user'

modules: {
    // 模块名: 模块对象
    menu,
    user
  }

在AppNav中分发A_userInfo这个action

找到这个action函数
- this.$store.dispath(‘模块名/action的名字’，传递的参数)
- mapActions(‘模块名’， [action名字1， action名字2…]) （采用这种）
```
methods: {
    ...mapAction('user', ['A_userInfo'])
}
```
调用这个action函数
```
created() {
    this.A_userInfo()
}
```

需要userInfo的地方，拿到使用即可

找到user下的userInfo
- this.$store.state.user.userInfo
- mapState(模块名, [‘state名字’, …])
```
computed: {
    ...mapState('user', ['userInfo'])
}
```

页面上使用

<div v-if="userInfo">
      {{ userInfo.account }}
      <img width="40" :src=" 'http://1.15.179.44:3001/' + userInfo.imgUrl " />
    </div>

今日任务

知识回顾
- 样式穿透（三种方式）
- 面包屑的制作
- axios的三层封装
- 把展开收起放到个人中心
个人信息交给vuex管理【重点】
- 安装vue辅助工具
axios-工具层-持续优化【掌握】
- loading效果的制作
- 统一弹出错误
- token错误或者过期的处理
欢迎您，退出登录【简单】
账号管理板块
- 面板组件的封装【掌握】
- element有的
  - 自己封装
账号添加 - 表单制作
- 账号列表 - 分页
账号删除 - 批量删除

axios-工具层-持续优化

loading的效果

思路：

loading效果，element提供
- 函数，打开loading效果（发起请求）关闭这个loading效果（请求完毕之后）
统一的打开loading与统一的关闭loading
- 请求拦截器打开
- 相应拦截器关闭

import { Loading, Message } from "element-ui"

let loadingInstance = {}

axios.interceptors.request.use((config) => {
    // 打开loading
    loadingInstance = Loading.service({})
    
    return config 
})

axios.interceptors.response.use(res => {
    loadingInstance.close()
	return res    
}， err => {
    loadingInstance.close()
}）

统一错误处理

axios.interceptors.response.use(res => {
    // 关闭loading
    loadingInstance.close()
	
    if(res.data.code !== 0) {
        // 统一弹出错误
        Message.error(res.data.msg)
    }

    // 一定要return
    return res
})

token不正确怎么办？

几个问题

谁知道token不正确（过期）
- 只有发起一个请求之后，后端会告诉你当前的token是否正确
  - 正确：给你返回数据
  - 不正确： 401（http的状态码， token过期）
不正确又怎么处理？
- 监控到不正确之后，跳转到登录页面，让用户重新登录

思路

在相应拦截器里面，拦截401错误
一旦发现是401，我跳转到登录页面

//  第一个参数理解为resolve   reject
axios.interceptors.response.use(res => {
    console.log(res, '***********************')
    // 关闭loading
    loadingInstance.close()
    
    if(res.data.code !== 0) {
        // 统一弹出错误
        Message.error(res.data.msg)
    }

    // 一定要return
    return res
}, err => {
    loadingInstance.close()
    if(err.response.status === 401) {
        // 跳转到登录页面
        // this.$router   
        router.push('/login')
    }
})

欢迎您-功能！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o8KjEOxc-1685634504025)(…/resource/md/欢迎您-组件使用.png)]

面板组件的抽取【Panel】

面板组件的职责

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L6jfCrA0-1685634504029)(…/resource/md/面板组件的职责.png)]

封装panel组件

<template>
  <div class="panel-box">
    <div class="panel-title">
      <span>{{ title }}</span>
      <!-- btn的插槽 -->
      <slot name="btn"></slot>
    </div>
    <div class="panel-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
    props: ['title']
};
</script>

<style lang="scss" scoped>
.panel-box {
  min-height: 200px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 1px 0;
  .panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    height: 50px;
    border-bottom: 1px solid #eee;
  }
  .panel-content {
    padding: 10px 15px;
  }
}
</style>

注册成全局组件

import Panel from '@/components/Panel.vue'


// 注册全局组件
Vue.component('Panel', Panel)

main.js中

账户管理

添加账号

需求

概述：用户填写账号信息，然后发给后端，后端添加账号。添加成功之后，给个提示，跳转到列表页面

步骤：

写api接口函数

/**
 * 添加账号
 * @param {*} data  {account: string, password: string, userGroup:string} 
 * @returns promise
 */ 
export const usersAddApi = (data) => axios({
    method: 'post',
    url: '/users/add',
    data
})