vue 使用mock 模拟后台数据

1、安装mockjs

npm i mockjs

2、在src目录下创建mock文件夹，在里面创建.json文件 例：src/mock/banner.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"
	}
]

3、编写mock配置：src/mock/mockServer.js

import Mock from 'mockjs'
import banner from './banner.json'

Mock.mock('/mock/banner','get',{code:200,data:banner})

4、main.js中引入mockServer.js让其参与项目运行

import './mock/mockServer'

5、创建 mockAjax.js， src/api/mockAjax.js 其中的baseURL为：/mock

/* 
	该文件是对axios的二次封装，目的：让整个项目发送ajax请求时，通用的配置不用一遍一遍重复编写了
	注意：本文件专门用于mock请求！！！！
*/
import axios from 'axios'

//创建一个axios实例对象，以后整个项目都用这个实例发请求
const mockAjax = axios.create({
  baseURL: '/mock', //请求基本路径
  timeout: 1000, //超时时间
});

export default mockAjax

6、src/api/index.js中

import mockAjax from './mockAjax'

//请求轮播图数据（模拟的数据）
export const reqBannerList = () => mockAjax.get('/banner')

7、至此，mock的模拟搭建完毕，下面在vuex中使用

import {reqBannerList} from '@/api'

const actions = {
	//获取主页轮播图的action（模拟）
	async getBannerList({commit}){
		const result = await reqBannerList()
		if(result.code === 200){
			commit('SAVE_BANNER_LIST',result.data)
		}else{
			alert(result.message)
		}
	}
}

const mutations = {
	//保存轮播图数据
	SAVE_BANNER_LIST(state,list){
		state.bannerList = list
		// console.log('轮播数据存进来了')
	}
}

const state = {
	bannerList:[], //轮播图数据
}
const getters = {}

export default {
	namespaced:true,
	actions,
	mutations,
	state,
	getters
}

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('home', ['bannerList'])
  },
  mounted () {
    // 组件一挂载完就分发一个action用于请求轮播图数据
    this.$store.dispatch('home/getBannerList')
  }
}
</script>