【VUE学习笔记】mockAxios流程：

项目场景：

需要做假数据，mockAxios

---

解决方案：

第一步：在src目录下新建mock文件夹

用于存放JSON格式的数据

第二步：在src目录下的api文件夹，创建mockAxios.js

用于对axios进行二次封装

//对Axios进行二次封装
import axios from "axios";
//引入进度条
import nprogress from "nprogress";
//引入进度条样式
import "nprogress/nprogress.css";
//start()开始进度条   done()结束进度条

//1:利用axios对象的方法create，去创建一个axios实例
//2:request就是axios，只不过稍微配置一下
let requests = axios.create({
  //配置对象
  //基础路径,发请求的时候，路径当中会出现/mock
  baseURL: "/mock",
  //超时时间,单位是毫秒
  timeout: 5000,
});

//请求拦截器:在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
  //config:配置对象，对象里面有一个属性很重要，headers请求头
  //进度条开始动
  nprogress.start();
  return config;
});

//响应拦截器
requests.interceptors.response.use(
  (res) => {
    //成功的回调函数:服务器相应数据回来以后，响应拦截器可以检测到，可以做一些事情
    //进度条结束
    nprogress.done();
    return res.data;
  },
  (error) => {
    //失败的回调函数:服务器相应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return Promise.reject(new Error("请求失败"));
  }
);

//对外暴露封装后的axios
export default requests;

第三步：在src目录下的api文件夹，创建index.js

//当前这个模块,对所有的接口进行统一管理
//引入二次封装的mockAxios
import mockAxios from "./mockAxios";
//获取所需的mock数据，此处演示为/banner
export const reqGetBannerList = () => mockAxios.get("/banner");

第四步：给所需组件挂载完成后的钩子函数mounted添加dispatch

也可以到第六步的时候一起写
当该数据会被父组件用于遍历生成子组件时，要写在父组件里

mounted() {
    //派发action：通知Vuex发起请求
    this.$store.dispatch("getBannerListData");
  },

第五步：在src目录下的store文件夹（仓库），创建index.js文件

写actions和mutations函数
写getters函数简化数据
请注意修改形参名字，不要照抄

//引入封装后的axios
import { reqGetBannerList } from "@/api/index";

//state
const state = {
  //state中初始化的默认空数据的数值类型要与服务器返回值的类型相同
  bannerList: [],
};

//mutations，处理数据
const mutations = {
  BANNERLIST(state, bannerList) {
    state.categoryList = bannerList;
  },
};

//actions:处理action,可以书写自己的业务逻辑  ,也可以异步提交mutation
//注意更改state的操作要交给mutations完成
const actions = {
  //通过API接口函数的调用,向服务器发请求,获取服务器端数据
  //异步获取banner的mock数据
  async getBannerListData({ commit }) {
    let result = await reqGetBannerList();
    // console.log(result);
    if (result.code === 200) {
      //提交mutation，通知更改state数据
      commit("BANNERLIST", result.data);
    }
  },
};

//getters:获取state中的数据, 相似于计算属性,用于简化仓库数据, 让组件获取仓库数据更加方便
const getters = {
  //当前的形参state是当前仓库中的，不是大仓库的state
  goodsList(state) {
    //这样写，假如没有网络导致没有数据，那么state.searchList是undefined，所以这里需要判断
    //此处a||b的意思是，如果a有值，那么就返回a，如果a没有值，那么就返回b
    return state.searchList.goodsList || [];
  },
  trademarkList(state) {
    return state.searchList.trademarkList || [];
  },
  attrsList(state) {
    return state.searchList.attrsList || [];
  },
};
	//对外暴露store类的一个实例
	export default {
	  state,
	  mutations,
	  actions,
	  getters,
	};

第六步：给所需组件引入mapState

import { mapState } from "vuex";
export default {
  name: "ListContainer",
  mounted() {
    //派发action：通知Vuex发起请求
    this.$store.dispatch("getBannerListData");
  },
  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },
};