vue前台 (三)优化三级分类请求次数（发送ajax次数）

js部分, app.vue

 //本来我们请求三级分类列表的功能是在TypeNav里面去做的，TypeNav组件又在 /home 路径下，加载TypeNav后，自动会发送ajax请求，

//而当从 /home 路由切换到 /serach 路径后，因为 /serach 路径 也有 TypeNav组件，加载TypeNav组件后，又会自动发送ajax请求，

这个请求会触发两次，而数据又是一样的，所以造成浪费（效率低下）,   因此我们可以优化在app总组件当中去发请求，请求发送一次即可

 

  mounted() {
    this.getCategoryList();
  },
  methods:{
    getCategoryList(){
      this.$store.dispatch('getCategoryList')
    }
  }

 

vuex,发送ajax部分，并且存储数据部分

 

1.ajax二次封装部分，ajax.js

//对axios的二次封装
// 配置基础路径和超时限制
// 添加进度条信息  nprogress
// 返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据
// 统一处理请求错误, 具体请求也可以选择处理或不处理
import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


const service = axios.create({
  baseURL: '/api',  // 配置基础路径
  timeout: 20000,  //和超时限制
});


//请求拦截器
//请求拦截器内部一般不会处理错误的信息
service.interceptors.request.use(config => {
  //config是发送请求的配置对象，必须处理完返回这个配置对象
  //开启我们的进度条
  NProgress.start()
  return config
});
// 响应拦截器
service.interceptors.response.use(
  response => {
    //停止进度条
    NProgress.done()
    //返回响应的时候，直接返回响应的data
    return response.data
  },
  error => {

    NProgress.done()

    alert('请求出错' + error.message || '未知错误')
    //以后不允许用户继续处理： 中断promise链
    return new Promise(() => {}) //返回pending状态的promise 中断
    //以后它允许用户继续对错误进行处理
    // return Promise.reject(error)
  }
);


export default service

2.接口请求函数文件 index.js

//这个文件是项目的接口请求函数文件
//给每个接口发请求，我们都把它封装成一个函数，到时需要请求拿数据的时候，就去调用对应的接口函数就完了
import Ajax from '@/ajax/Ajax'
// 请求获取三级分类列表数据
// get   /api/product/getBaseCategoryList   参数：无

export const reqCategoryList = () => Ajax({
  url:'/product/getBaseCategoryList',
  method:'GET'
})

3.vuex,发送ajax请求部分  home.js

import {reqCategoryList} from '@/api'

const state = {
  categoryList : []
}
const mutations = {
  //直接修改数据
  RECEIVECATEGORYLIST(state,categoryList){
    state.categoryList = categoryList
  }
}

const actions = {
  //异步请求数据
  //async 和 await的用法
  async getCategoryList({commit}){
    const result = await reqCategoryList()
    if(result.code === 200){
      commit('RECEIVECATEGORYLIST',result.data)
    }
  }
  
}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

4.TypeNav组件获取响应数据部分   typeNav.vue

import { mapState } from "vuex";

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

    // ...mapState(['categoryList'])

    //上面两种写法是一回事，mapState映射的时候默认映射的就是总的store的state内部的数据
    //如果使用了vuex模块化开发，那么数组的形式就无法使用了

    // 普通写法
    // categoryList(){
    //   return this.$store.state.home.categoryList
    // }
    
    ...mapState({
      categoryList: state => state.home.categoryList
    })
  }