本文共 1644 字，大约阅读时间需要 5 分钟。

生成随机数据

1. 首先应该先建立一个json文件，把模拟数据写进去

2. 安装

npm install mockjs

3. 建立js文件，使用mockjs提供mock数据接口

阅读官网，mockjs的mock方法有以下几种

• rurl 可选。
  表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、’/domian/list.json’。
• rtype 可选。
  表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等
• template 可选。
  表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、’@EMAIL’。
• function(options) 可选。
  表示用于生成响应数据的函数。
  1. Mock.mock( rurl?, rtype?, template|function( options ) )
     根据数据模板生成模拟数据。
  2. Mock.mock( template )
     根据数据模板生成模拟数据。
  3. Mock.mock( rurl, template )
     记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
  4. Mock.mock( rurl, rtype, template )
     记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
  5. Mock.mock( rurl, rtype, function( options ) )
     记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回

注意返回的模板template要和文档的一样，例如用code：0，表示请求成功

import Mock from 'mockjs'import data from './data.json'// 返回goods的接口Mock.mock('/goods', {   code:0, data: data.goods})

4.在main文件在加载js文件

import './mock/mockServer' // 加载mockServer即可

拦截ajax请求

1. 不使用本地代理

export const reqShopInfo = () => ajax('/info')

2.ajax请求后会影响store

首先增加新的state变量，例如商家列表

export default {     goods: [], // 商品列表  ratings: [], // 商家评价列表}

再者增加mutations

[RECEIVE_GOODS](state, {   goods}) {       state.goods = goods  }

最后增加actions并进行异步请求

// 异步获取商家商品列表  async getShopGoods({   commit}, callback) {       const result = await reqShopGoods()//请求mock模拟数据    if (result.code === 0) {         const goods = result.data//获取结果      commit(RECEIVE_GOODS, {   goods})//更新数据      // 数据更新了, 通知一下组件      callback && callback()    }  }