【vue-mockjs模拟数据的使用】

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
        })
    }