1.安装

npm i mockjs@1.1

 2.准备json数据

说明：mock数据需要的图片放置到public文件夹中（原封不动的打包到dist文件夹）

[
    {
        "id": "1",
        "imgUrl": "/images/banner1.jpg"
    },
    {
        "id": "2",
        "imgUrl": "/images/banner2.jpg"
    },
    {
        "id": "3",
        "imgUrl": "/images/banner3.jpg"
    },
    {
        "id": "4",
        "imgUrl": "/images/banner4.jpg"
    }
]

3.创建mockServe.js文件

说明：默认暴露json格式，图片等。mock数据：第一个参数请求地址，第二个参数：请求数据。

//说明：一定要大写
import Mock from "mockjs"

// 把json数据格式引入进来,webpack默认暴露，图片，json格式文件
import banner from "./banner.json"

import floor from "./floor.json"

Mock.mock("/mock/banner",{code:200,data:banner})
Mock.mock("/mock/floor",{code:200,data:floor})

 4.引入main.js

说明：就是向引入图片一样；将Mock.mock语句放在main.js中是为了确保在整个应用程序运行时，模拟接口能够正常工作，而不是在某个特定组件或模块中只生效一次。这样做可以使模拟数据在整个应用程序范围内生效，方便进行开发和测试。

// 引入mock数据
import "@/mock/mockServe";

5. 重写axios

//对axios进行二次封装
import axios from "axios"
import "nprogress/nprogress.css"

// 引入进度条

import nprogress from "nprogress"
  
// start代表进度条开始，done表示进度条结束
const requests =axios.create({
    //   发请求的时候自动出现api
      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=>{
    console.log(error);
    return Promise.reject(new Error("fail"))
})


export default requests

 6.index.js

import mockRequest from "./mock";
// 轮播图
export const reqGetBannerList = () => {
  return mockRequest.get("/banner");
};

7.store

说明：store里面的index.js。

//home模块的小模块
import { reqCatgoryList,reqGetBannerList,reqFloorList } from "@/api"

const state={
     //state中的默认值为空，服务器返回的值进行初始花，服务器返回的
    //  数组，就返回数组，对象也是
      categoryList:[],
       bannerList:[],
       floorList:[]
}
const actions={
    // 通过接口函数向服务器发送数据
   async categoryList({commit}){
        let result =await reqCatgoryList()
       if(result.code===200){
          commit("CATEGORYLIST",result.data)
       }
    },
    // 获取首页轮播图
   async getBannerList({commit}){
      const result=await reqGetBannerList()
      if(result.code===200){
         commit("GETBANNERLIST",result.data)
      }
    },
    // 获取floor数据
   async getFloorList({commit}){
    const result=await reqFloorList()
    if(result.code===200){
        commit("GETFLOORLIST",result.data)
     }
    }
}

const mutations={
    CATEGORYLIST(state,categoryList){
        state.categoryList=categoryList
    },
    GETBANNERLIST(state,bannerList){
        state.bannerList=bannerList
    },
    GETFLOORLIST(state,floorList){
        state.floorList=floorList
    }

}

const getters={}

export default {
    state,
    mutations,
    actions,
    getters
}

8.vue页面

说明：vue页面中的script标签

import { mapState } from "vuex";
// 引入swipter
export default {
  name: "",
  data() {
    return {};
  },
  mounted() {
    //派发action，将数据存储到仓库
    this.$store.dispatch("getBannerList");
    // 因为dispathch设置到异步请求是，
    // 导致v-for结构还没完成
  },
  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },
};