vue前台 (三)优化三级分类请求次数(发送ajax次数)
2023-09-11 14:20:08 时间
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
})
}
相关文章
- vue - webpack.dev.conf.js
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 【Vue+element+admin】登陆页面篇(login.vue)
- 【Vue】错误 : 无法加载文件 C:UsersAdministratorAppDataRoamingnpmvue.ps1,因为在此系统上禁止运行脚本的解决方法
- vue+iview后台管理系统util.ajax跨域问题的解决方法
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Vue——详解MVVM模型在vue中的使用
- vue项目中定义全局变量、函数的几种方法
- 【前端】Vue文件html、js、css分离
- 推荐 | Vue 入门&进阶路线
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- vue 3.0 项目搭建移动端 (五) 没有配合webpack的情况下 引入 sass
- vue性能优化1--懒加载
- 用【mysql,vue,node】制作一个前后端分离小项目
- Vue 国际化之 vue-i18n 的使用
- Vue中v-model解析、sync修饰符解析
- 02-vue基础-Vue常用特性
- vue-resource--ajax请求数据
- VUE-015-解决 vue install 引发的 failed Error: not found: python2 问题
- 六、vue cli 调试
- vue之loader处理静态资源
- 【Vue】Vue2做项目时遇到的小bug,简单总结一下~
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- vue文档摘录九:Vue Router
- Vue脚手架(vue-cli)搭建和目录结构详解
- 2023前端面试上岸手册——VUE部分
- petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive
- 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域
- ejs结合vue实现SSR ,express+ejs+vue = 服务器端渲染 ?Vue-SSR的奇思妙想
- 解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。