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
})
}