Vue项目流程2，axios二次封装，接口统一管理，nprogress使用，vuex模块式开发，三级联动展示数据业务，JS控制二三级商品分类的显示与隐藏，防抖与节流，三级联动组件路由跳转与传递参数_axios nprogress

5、POSTMAN测试接口

6、axios二次封装

为什么要进行二次封装呢？
请求拦截器，可以在发请求前可以处理一些业务；响应拦截器，当服务器数据返回以后可以处理一些事情。
安装axios： cnpm install --save axios

在项目中经常API文件夹就是放axios，新建文件夹api

7、接口统一管理

项目很小：完全可以在组件的生命周期函数中发请求
项目大：接口统一管理
跨域问题：如果出现协议、域名、端口号不同请求，称之为跨域，代理解决
找到vue.config.js文件添加以下代码：

  //代理跨域
  devServer:{
    proxy:{
      'api':{
        target:'http://gmall-h5-api.atguigu.cn',
      }
    }
  }
1
2
3
4
5
6
7
8

8、nprogress进度条的使用

安装：cnpm install --save nprogress
引入：import nprogress from "nprogress"
start：进度条开始，done:进度条结束
引入进度条样式：import 'nprogress/nprogress.css'
nprogress.css文件修改样式：bar:进度条颜色

9、vuex状态管理

vue是什么？

vuex是官方提供一个插件,状态管理库，集中式管理项目中组件共用的数据。
切记，并不是全部项目都需要Vuex，如果项目很小，完全不需要vuex,如果项目很大，组件很多、数据很多，数据维护很费劲。
state：仓库，存储数据的地方
mutations:修改state的唯一手段
actions：处理action，可以书写自己的业务逻辑，也可以处理异步
getters：理解为计算属性，用于简化仓库数据，让组件回去仓库数据更加方便对外暴露Store类的一个实例

基本使用

1、安装vuex:cnpm install --save vuex@3
2、新建store文件夹，在内新建index.js文件

//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//使用插件一次
Vue.use(Vuex)
//state：仓库，存储数据的地方
const state = {}
const mutations = {}
const actions = {}
const getters = {}
//mutations:修改state的唯一手段
//actions：处理action，可以书写自己的业务逻辑，也可以处理异步
//getters：理解为计算属性，用于简化仓库数据，让组件回去仓库数据更加方便
//对外暴露Store类的一个实例
export default new Vuex.Store({
    //注册
    state,
    mutations,
    actions,
    getters
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3、在main.js文件内引入仓库并注册
4、使组件拿到仓库数据

import store from '@/store'
//引入映射仓库
import { mapState } from 'vuex'
······
computed:{
    ...mapState('count')
}
1
2
3
4
5
6
7

详细介绍看其他文章

Vuex模块式开发

如果项目过大,组件过多，接口也很多，数据也很多,可以让Vuex实现模块式开发模拟state存储数据。
1、新建小仓库文件夹，文件夹内新建文件index.js

//home模块的小仓库
const state = {}
const mutations = {}
const actions = {}
const getters = {}

export default({
    state,
    mutations,
    actions,
    getters
})
1
2
3
4
5
6
7
8
9
10
11
12

资源管理图：
2、在大仓库引入小仓库，并且实现Vuex模块式开发存储数据。

//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//使用插件一次
Vue.use(Vuex)
//引入小仓库
import home from './home'
import search from './search'
//对外暴露Store类的一个实例
export default new Vuex.Store({
    //实现Vuex仓库模块式开发存储数据
    modules:{
        home,
        search
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

10、完成TypeNav三级联动展示数据业务

基本步骤

1、将TypeNav文件夹移到components，记得修改引入路径。

遇到的问题：Cannot read properties of undefined (reading ‘dispatch’)
解决：注意是否下载的vuex是3版本

2、通知Vuex发请求

 mounted(){
        //通知Vuex发请求，获取数据，存储于仓库中
        this.$store.dispatch('categoryList')
    }
1
2
3
4

3、向服务器发请求

async categoryList({commit}){
    //通过api里面的接口函数调用，向服务器发请求获取服务器的数据
    let result = await reqCategoryList()
    if(result.code ==200){
        commit('CATEGORYLIST',result.data)
    } 
}
1
2
3
4
5
6
7

CATEGORYLIST(state,categoryList){
    state.categoryList = categoryList
}
1
2
3

4、利用仓库映射，让组件得到相应的数据

computed:{
    ...mapState({
        //右侧需要的是一个函数，当使用这个计算属性的时候，右侧的函数会立即执行一次
        //注入一个参数state，其实即为大仓库中的数据
        categoryList:(state)=>state.home.categoryList
    })
}
1
2
3
4
5
6
7

5、完成数据展示

一级分类动态添加背景颜色

方式一：采用样式完成
方式二：采用JS完成

:class="{cur:currentIndex == index}"
···
//鼠标进入修改响应式数据currentIndex属性
        changeIndex(index){
            this.currentIndex=index
        },
        leaveIndex(){
            this.currentIndex = -1
        }
1
2
3
4
5
6
7
8
9

通过JS控制二三级商品分类的显示与隐藏

<div class="item-list clearfix" :style="{display:currentIndex == index?'block':'none'}">
1

演示卡顿现象

正常:事件触发非常频繁，而且每一次的触发，回调函数都要去执行(如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿)
节流:在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。
防抖:前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发只会执行一次。

防抖与节流

lodash插件：里面封装函数的防抖和节流的业务【闭包+延迟期】，向外暴露的是一个_函数。
全部引入：import _ from 'lodash';
防抖方法：返回的是一个函数

const result = _.debounce(function(){
    
},1000)
1
2
3

节流方法：throttle回调函数不要使用箭头函数，可能出现上下文this

changeIndex:throttle(function(index){
    this.currentIndex=index
},50)
1
2
3

按需引入，默认暴露：import throttle from 'lodash/throttle';

防抖：用户操作频繁，无关规定时间长短，期间只执行一次。
节流：用户操作很频繁，但是把频繁的操作变成少量操作【可以给浏览器充裕的时间解析代码】即规定时间执行一次。

三级联动组件路由跳转与传递参数

使用声名式导航，当点击各个标签时，会产生很多组件实例，耗用内存，导致卡顿现象。

方式：编程式导航加事件的委派
利用事件委派存在问题：
1、不确定是否点击的是a标签
2、无法获取参数
3、无法确定是一二三哪一级a标签
解决：
1、给a标签加上自定义属性data-categoryName，其余子节点没有
2、节点有一个属性dataset属性，可以获取节点的自定义属性与属性值
3、通过categoryid属性区分几级a标签

        goSearch(event){
            const element =  event.target
            let{categoryname,category1id,category2id,category3id} = element.dataset
            if(categoryname){
                //整理路由跳转的参数
                let location = {name:'search'}
                let query = {categoryName:categoryname}
                //通过category1id区分几级a标签
                if(category1id){
                    query.category1Id = category1id
                }else if(category2id){
                    query.category2Id = category2id
                }else{
                    query.category3Id = category3id
                }
                //整理完参数
                location.query = query
                //路由跳转
                this.$router.push(location)
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20