前言

MockJS用于创建假数据，让前端在不需要后端支持的情况下模拟出虚假的接口数据，方便测试。
本文章记录MOCKJS在Vue项目文件中与Vuex结合使用的思路。

MockJS使用方法以及文件结构

在下载好Mockjs的包之后引入。
在src文件夹下创建名为mock的文件夹，里面的json文件是模拟所用的数据。
注意此处json文件必须格式化，否则会出现无法获取的问题。
然后在mock文件夹下创建js文件，引入mockjs取名为Mock。 调用Mock实例的mock方法，第一个参数为url。个人的理解是Mock实例的mock方法可以创建一个接口/服务器，储存json格式的数据。
第二个参数 template代表需要拦截的ajax类型。

此处出现了一个有意思的参数处理方法，在mockjs的源码中，我们可以看到，第二个参数应该是rtype,但是当我们只给mock方法传递两个参数时，它把rtype处理成了template参数。

在mock方法调用完毕之后，在api文件夹下创建专门用来管理mock请求的js文件。

mockAjax.js 在此处引入axios，创建axios实例调用create方法。配置对象里第一个属性baseURL可以理解为请求的url的前缀，第二个属性timeout代表请求超时时间。

创建完mockAjax.js之后 引入到 api文件夹下的index.js文件中 这是用来管理所有类型的ajax请求的文件。

引入之后处理并且对外暴露。

关于vue.config.js中proxy的使用方法

对/api开头的请求进行代理转发，此时完整的请求路径相当于target所代表的请求路径加上'/api'。如果需要移除api，则在proxy配置中添加pathRewrite配置项。

'/api': {}，就是告诉node, 我接口只要是’/api’开头的才用代理，所以你的接口就要这么写 /api/xx/xx. 最后代理的路径就是 http://xxx.xx.com/api/xx/xx. pathRewrite的作用是因为正确的接口路径是没有/api的，所以需要用'^/api': '/'，表示请求接口时去掉api

与Vuex结合使用

Vuex有四个核心属性
state用来存储共享数据, action 用来提交mutation mutation 则是唯一能改变state的渠道。

先在mounted生命周期中 使用$store上的dispatch派发一个action。

准备好action中派发的类型。 此处可以使用async喝await语法糖方便直接获取Promise的结果， 获取之后通过简单的if判断返回结果。
此处的commit是获取context上下文中的commit方法，用ES6的解构语法获取，其实就相当于该函数中的第一个参数的commit方法。
注意，此处action中的方法还有第二个参数，相当于前面dispatch中的第二个参数，但是因为dispatch并没有传第二个参数，因此这里也没有。

mutations里可以修改state中的数据，其中的函数一般全用大写字母来命名，这样可以与action加以区分。mutations里的函数的第一个参数就是state，可以获取state身上的数据加以修改，第二个参数就是action中commit提交mutations的第二个参数，相当于结果，用来修改数据。

这样便走通了从state->组件实例->dispatch到action->action提交commit到mutations，mutations再修改->state这样的路径。