vue-mockjs模拟数据的使用
官网地址:https://github.com/nuysoft/Mock/wiki/Getting-Started
1.下载:
npm install mockjs
2.在项目src中创建mock文件夹 创建json文件和mockServer.js文件
3.创建banner.json 文件
4.准备json数据(注意:要格式化一下,别留空格)
5.把mock数据需要的文件里面要把图片放在public文件里(因为打包会出现dist文件夹)
注意:可以在项目中图片也存在 最后再删除
6.创建mockServer.js通过mockjs插件实现模拟数据
7.mockServer.js
import Mock from 'mockjs'
import banner from './banner.json'
import floor from './floor.json'
//(webpack默认对外暴露的:图片、json数据格式)
//mock数据:第一个参数请求地址
//第二个参数:请求的数据
Mock.mock('/mock/banner',{code:200,data:banner})
8.mockServer.js文件在入口文件引入
// main.js
import '@/mock/mockServer'
9.在api文件夹下创建mockAjax.js
import axios from 'axios'
const requests = axios.create({
baseURL:"/mock",
timeout:500,
})
requests.interceptors.request.use((config)=>{
return config
})
requests.interceptors.response.use((res)=>{
return res.data
},(error)=>{
return Promise.reject(new Error('faile'))
})
export default axios
10.在spi文件夹下的index.js
import mockRequests from './mockAjax'
export const reqGetBannerList = ()=>mockRequests.get('/banner')
11.在vuex home.js文件夹
import {reqGetBannerList} from '@/api'
const state = {
bannerList:[]
}
const mutations = {
GETBANNERLIST(state,bannerList){
state.banneList = bannerList
}
}
const actions = {
async getBannerList({commit}){
let result = await reqGetBannerList()
if(result.code==200){
commit('GETBANNERLIST',result.data)
}
}
}
12.在组件中使用
import {mapState} from 'vuex'
mounted(){
//深发action:通过Vuex发起ajax请求,将数据仓储在仓库当中
this.$store.dispatch('getBannerList')
},
computed:{
...mapState({
bannerList:state=>state.home.bannerList
})
}