封装Ajax请求以及Vuex实现模块化管理

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、封装Ajax请求

1.引入库

npm install  axios 

2. 封装ajax请求模块

文件路径：api->request.js

//axios二次封装
import axios from "axios";

// 1:利用axios对象的方法create，去创建一个axios实例'
//2 : request就是axios，只不过稍微配置一下
const request = axios.create({
    //配置对象
    //基础路径,发请求的时候，路径当中会出现api
    baseURL:"/api",
    timeout:5000,
});
//请求拦截器:在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
request.interceptors.request.use((config)=>{
    //  config:配置对象，对象里面有一个属性很重要，headers请求头
    return config;
});
// 响应拦截器
request.interceptors.response.use((res)=>{
    // /成功的回调函数:服务器相应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data;
},(error)=>{
    //响应失败的回调函数
    return Promise.reject(new Error('faile'));

})
export default request;

2.2 Api统一管理

api->index.js
引入上面的request.js

//API进行统一管理
import request from "./request";
//三级目录接口
export const reqCategoryList = ()=>(request({
    url: '/product/getBaseCategoryList',
    method:'get',
}))

2.3.配置代理解决跨域

webpack中文网
vue.config.js

 // 解决跨域
  devServer: {
    proxy: {
      '/api': {
        target: 'http://gmall-h5-api.atguigu.cn',
      },
    },
  },

二、Vuex实现模块化管理

1.引入库

npm install  vuex

2.store/home/index.js

home/index.js是专门对某一组件/模块数据的管理，需引入上api->index.js暴露的接口

// home模块的小仓库
import { reqCategoryList, reqBanner, reqFloor } from '../../api/index'
// state:仓库存储数据的地方
const state = {
    categoryList: [],
    banner: [],
    floor: []
};
//mutations:修改state的唯一手段
const mutations = {
    CategoryList(state, categoryList) {
        state.categoryList = categoryList;
    },
    // 轮播图
    GETBANNER(state, banner) {
        state.banner = banner;
    },
    GETFLOOR(state,floor){
        state.floor = floor;
    }
};
// action:处理action,可以书写自己的业务逻辑，也可以处理异步
const actions = {
    async categoryList({ commit }) {
        let result = await reqCategoryList();
        if (result.code === 200) {
            commit("CategoryList", result.data);
        }
    },
    // 轮播图
    async getBanner({ commit }) {
        let result = await reqBanner();
        console.log('sss',result);
        if (result.code === 200) {
            commit("GETBANNER", result.data);
        }
    },
    // 
    async getFloor({commit}){
        let result = await reqFloor();
        
        if(result.code === 200){
            commit("GETFLOOR",result.data);
        }

    }
};
//getters:理解为计算属性，用于简化仓库数据，让组件获取仓库的数据
const getters = {};
export default ({
    state,
    mutations,
    actions,
    getters
})

2.2store/index.js

store/index.js对全部组件/模块数据的统一管理

// Vuex实现模块化开发
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 引入小仓库
import home from './home';
import search from './search';
export default new Vuex.Store({
    // 实现Vuex仓库模块化开发存储数据
    modules:{
        home,
        search
    }
})

2.3组件挂载完毕:可以向服务器发请求

通知Vuex发请求，获取数据，存储于仓库当中

 mounted() {
    //通知Vuex发请求，获取数据，存储于仓库当中
    //categoryList方法在store/home/index.js中实现
    this.$store.dispatch("categoryList")；
  },

三、组件获取数据

其时我们的仓库已经有数据了，组件并没有获取到数据。下面是组件获取数据方法

import { mapState } from "vuex";
computed: {
    ...mapState({
      //右侧需要的是一个函数，当使用这个计算属性的时候，右侧函数会立即执行一次
      //注入一个参数state，其实即为大仓库中的数据
      categoryList: (state) => {
        console.log(state);
        return state.home.categoryList;
      },
    }),
  },