mockjs模拟数据+Vuex

Mock.js可以模拟请求，获取数据

1、在项目根目录下载mockjs

npm install --save mockjs

2、在项目src文件夹中创建mock文件夹

3、将准备好的JSON数据放入JSON文件中

注意：JSON数据不允许有空格，最好格式化好文档，否则容易报错

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

4、把mock数据需要的图片放置到public文件夹中

【public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹中】

5、在创建的mockServe.js文件下通过mockjs插件实现模拟数据

// 先引入mockjs模块
import Mock from 'mockjs';
// 把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]
// webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json'
import floor from './floor.json'

// mock数据：第一个参数请求地址   第二个参数：请求数据
Mock.mock("/mock/banner", {code: 200, data: banner})  //模拟首页轮播图的数据
Mock.mock("/mock/floor", {code: 200, data: floor})

6、在main.js文件中引入MockServer.js文件

// 引入MockServer.js----mock数据
import '@/mock/mockServe'

7、在api文件夹下创建mockAjax文件

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

// 1:利用axios对象的方法create,去创建一个axios实例
// 2:request就是axios,只不过稍微配置一下
const requests = axios.create({
//  配置对象
//  基础路由，发请求的时候，路径当中会出现api
  baseURL: "/mock",
//  代表请求超时的时间5S
  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('fail'));
  alert("服务器响应数据失败")
  nprogress.done();
});

// 对外暴露
export default requests;

 注意：要修改baseUrl

8、在api文件夹下的index增加封装的函数

import mockRequest from '@/api/mockAjax'
// 获取banner(Home首页轮播图接口)
export const reqGetBannerList = () => mockRequest.get('/banner')
// 获取floor数据
export const reqGetFloorList = () => mockRequest.get('/floor')

9、在store仓库当中封装请求函数

import {reqCategoryList, reqGetBannerList, reqGetFloorList} from '@/api'
// home模块的小仓库
const state = {
  //state中数据默认初始值要根据接口返回值初始化
  categoryList: [],
  //轮播图的数据
  bannerList: [],
  //floor数据
  floorList: []
}
const mutations = {
  CETEGORYLIST(state, categoryList) {
    state.categoryList = categoryList;
  },
  GETBANNERLIST(state, bannerList) {
    state.bannerList = bannerList;
  },
  GETFLOORLIST(state, floorList){
    state.floorList = floorList
  }
}
const actions = {
//  通过API里面的接口函数调用，像服务器发请求，获取服务器的数据
  async categoryList({commit}) {
    let result = await reqCategoryList()
    if (result.code === 200) {
      commit("CETEGORYLIST", result.data)
    }
  },
//  获取首页轮播图的数据
  async getBannerList({commit}) {
    let result = await reqGetBannerList()
    if (result.code === 200) {
      commit("GETBANNERLIST", result.data)
    }
  },
//  获取floor数据
  async getFloorList({commit}) {
    let result = await reqGetFloorList()
    if (result.code === 200) {
      commit("GETFLOORLIST", result.data)
    }
  }
}
//  计算属性
const getters = {}
export default {
  state,
  mutations,
  actions,
  getters
}

10、在需要发起请求的组件中发起请求

<script>
import {mapState} from 'vuex'

export default {
  name: '',
  mounted() {
    //  派发action: 通过Vuex发起ajax请求，将数据仓储在仓库当中
    this.$store.dispatch('getBannerList')
    //  在new Swpier实例之前，页面中结构必须的有【选择把new Swiper实例放在mounte这里不行
    //  因为dispatch当中涉及到异步语句，导致v-for遍历的时候结构还没有完全搭好
  },
  computed: {
    ...mapState({
      bannerList: state => state.home.bannerList
    })
  },
}
</script>