目录
gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master
4.所以我们在store/home.js中书写getBannerList这个函数方法
gitee仓库地址:登录 - Gitee.com
https://gitee.com/CMD-UROOT/sph-project/commits/master
大家根据上传历史进行查找你需要的代码
1.在api文件下新建mockAjax.js文件
因为我们现在用的是虚拟数据,mockjs,原来的request.js是向真实的服务器发请求的,所以我们现在把request.js复制一份,重命名为mockAjax.js,并把基础路径baseURL:"/mock",为的就是区分
mockAjax.js中的代码
//对axios进行二次封装
//引入axios
import axios from "axios";
//引入进度条
import nprogress from "nprogress"; //具体使用方法可以翻看gitee文档获取npm社区提供的文档,就是去百度嘛
console.log(nprogress) //打印后可以在控制台看到nprogress中的start和done属性
//nprogress中的 start:进度条开始 done:进度条结束
//引入进度条样式
import "nprogress/nprogress.css";
//1:利用axios对象的方法create,去创建一个axios实例
//2:requests就是axios,只不过稍微配置一下
const requests = axios.create({
//配置对象
//基础路径,发请求的时候,路径当中会出现/api
baseURL:"/mock",
//代表请求超时的时间5s
timeout: 5000,
})
//请求拦截器:在发送请求之前,请求拦截器可以检测到,可以在请求发出去之前做一些事情
//interceptors拦截器
//request请求的信息
requests.interceptors.request.use((config)=>{
//当请求拦截器捕获到请求的时候,进度条开始动
nprogress.start()
//config:配置对象,对象里面有一个属性很重要,headers请求头
return config;
})
//响应拦截器
//response响应的信息
//成功的回调会返回服务器响应的数据res
//失败的回调error
requests.interceptors.response.use((res)=>{
//当服务器返回的数据成功了,你拿到数据的时候,进度条结束
nprogress.done()
//成功的回调函数;服务器响应的数据回来以后,响应拦截器可以检测到,可以做一些事情
return res.data
},(error)=>{
//响应失败的回调函数
return Promise.reject(new Error('faile')) //终结Promise链 当然也可以打印错误信息console.log()
})
//对外暴露
export default requests;2.发请求,需要有接口
在api/index.js中这样写
//当前这个模块:API进行统一管理
//你要发请求,需要用到我们封装的axios
//引入我们封装的aixos
import requests from './request'
import mockRequests from './mockAjax'
//三级联动的接口
///请求地址: api/product/getBaseCategoryList get 无参数
export const reqCategoryList = ()=>requests({ //对外暴露
url:'/product/getBaseCategoryList', //因为在request.js中我们用了baseURL基础路径设置为/api,所以这里url我们就可以不用加api了
method:'get'
})
//获取banner(Home首页轮播图接口)
export const reqGetBannerList = ()=>mockRequests.get('/banner')新增这两段:
3.向服务器发请求,将数据存储在仓库中
在Home/ListContainer/index.vue中派发action
控制台会出一个警告,原因是上图的代码相当于在调用仓库当中的getBannerList函数,而我们仓库中是没有的
4.所以我们在store/home.js中书写getBannerList这个函数方法
打印的结果,成功得到轮播图数据
而且我们Network中我们的mock发的请求是被浏览器拦截了,真的没有向服务器发请求
//引入我们封装的api
import { reqCategoryList, reqGetBannerList } from "@/api"
//home模块的小仓库
//state:仓库存储数据的地方,也就是状态
const state = {
//state中的数据默认初始值别乱写,服务器返回的是对象,服务器返回的是数组,[初始值是根据接口返回值去初始化的]
//home仓库中存储三级菜单的数据
categoryList:[], //初始值
//轮播图的数据
bannerList:[]
}
//mutations:修改state的唯一手段
const mutations = {
CATEGORYLIST(state,categoryList){
state.categoryList = categoryList //state.categoryList 等于服务器返回的categoryList
},
GETBANNERLIST(state,bannerList){
state.bannerList = bannerList
}
}
//actions:处理actions,可以书写自己的业务逻辑,也可以处理异步
const actions = {
//通过API里面的接口函数调用,向服务器发请求,获取服务器的数据
async categoryList({commit}){ //{commit}结构出commit提交mutation
let result = await reqCategoryList() //为了拿到Promise的成功的结果所以这里加await, async和await是cp,必须同时存在
console.log(result)//不加await和async返回的结果是Promise//加了await和async返回的结果是成功的结果,就是我们三级联动的数据了
if(result.code==200){//如果结果为200
commit("CATEGORYLIST",result.data)//把CATEGORYLIST提交mutation result.data是提交的数据
}
},
//获取首页轮播图的数据
async getBannerList({commit}){
let result = await reqGetBannerList()
// console.log(result) 控制台查看数据是否获取成功
if(result.code==200){
commit('GETBANNERLIST',result.data)
}
}
}
//getters:理解为计算属性,用于简化仓库数据,让组件获取仓库的数据更加方便
const getters = {}
//对外暴露Store类的一个实例
export default{
state,
mutations,
actions,
getters
}
5.形成三连环
修改代码的位置:
此时可以看到我们仓库当中已经有数据了
但是我们组件身上还没有数据
6.组件获取到仓库中的数据
在pages/ListContainer/index.vue中 :组件获取数据
//辅助函数获取数据
import { mapState } from 'vuex';
export default {
name: "",
mounted(){
//派发action:通过Vuex发起ajax请求,将数据存储在仓库当中
this.$store.dispatch('getBannerList')
},
computed:{
//注入一个参数state,state其实就是大仓库的数据
...mapState({
//映射为组件实例身上的数据
bannerList:state=>state.home.bannerList //大仓库的数据给到组件中的bannerList
})
}
};这个时候,我们组件的身上就有数据了
总结就三步: 向mockjs要数据,得到数据放仓库,组件中获取到仓库中的数据
版权声明：本文为qq_46368050原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。