vue-mock的模块化开发

如果我们需要真正的使用mock去做对应后台的数据模拟开发，那么我们所有的mock肯定不能放在index.js里，这样很容易与他人代码冲突。这里我将提供我的思路，有什么不成熟的地方还望及时沟通。

以下便是项目结构：

丨- store
    丨- modules
           - item.js
    - index.js

其中最主要的就是index.js的配置：

// 导入mockjs
import Mock from 'mockjs'
// 自动引入mock模块
const mockArrNew = require.context('./modules', true, /.js$/)
// 获取引入的mock模块，分别执行Mock.mock，，适用于Vue2
mockArrNew.keys().forEach(key => {
  let el = mockArrNew(key).default[0]
  Mock.mock(el.path, el.methods, el.fn)
})
// Vue3弃用了require.context，所以我们使用：
const mockArrNew = import.meta.globEager('./modules/*.js')
Object.values(mockArrNew).map(el=>el.default[0]).forEach(key => {
  let el = mockArrNew(key).default[0]
  Mock.mock(el.path, el.methods, el.fn)
})

index.js是在项目搭建完后就不需要去动的地方，开发过程中只需要在同级目录的modules下创建对应js，并写入对应的内容即可。

需要注意当前使用vue版本是否为vue3，vue3是不支持require.context的，需要格外注意。
此外，import.meta.globEager无法遍历子目录，可能需要更改编写习惯。

modules下js编写示例如下：

let res = {}
function pdUser(option) {
  if (option.username == 'admin' && option.password == '123456') {
    res.status = 200
    res.message = '好人一生平安'
    res.role = 'admin'
  } else if (option.username == 'youke' && option.password == '123456') {
    res.status = 200
    res.message = '好人的客人一生平安'
    res.role = 'youke'
  } else {
    res.status = 101
    res.message = '亚细亚类'
    res.role = 'null'
  }
}
// 可以通过这个模拟一个api的接口
let mock = {
  path: '/api/login',
  methods: 'post',
  fn: function(option) {
    pdUser(JSON.parse(option.body))
    return res
  }
}
export default [mock] //这里注意一下

如果有更漂亮的写法欢迎来讨论，让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注，您的赞与关注将是我源源不断的前进动力。