实战Vue简易项目（5）模拟数据

摘要：若需要传参，传第二个参数不接受多个参数的传入，最多只接收两个参数请求数据目前，通过以上步骤，我们独立的构建了模拟数据和状态管理，但还没有将它们结合起来。验证如果你想验证写出来的模拟数据是否正确，可以在示例页打开控制台，直接运行。

关于模拟数据，这里使用Mock.js这个库，关于用法，官网说的也比较详细，这里我就简单的带一下。

我们先将项目中src/components/HelloWorld.vue删除，将src/router/index.js作如下修改：

import Vue from "vue"
import Router from "vue-router"
import Index from "@/views/vacation/"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      name: "Index",
      component: Index
    }
  ]
})

然后，在src/views/vacation/建立index.vue：

在手机模式下，显示效果如下：

在项目根目录下，使用命令行npm i -D mockjs；

新建src/mock/list.js:

import { mock, Random } from "mockjs";

export default mock({
  "list|0-50": [
    {
      "approveId": "@id",
      "applier": {
        "userId": "@guid",
        "userName": "@cname",
        "sectionId": "@id",
        "sectionName": "@ctitle",
      }
      ...
    }
  ]
})

这里的"@id"（称为“占位符”）是Random.id()的简写形式；

这里的"@id"（称为“占位符”）必须使用引号包裹；

这里的"@id" + 111会是将"@id"当作字符串（返回"@id111"），不等于Random.id() + 111；

新建src/mock/index.js：

Mock.js拦截请求地址：

import { mock, Random } from "mockjs";
import List from "./list";

mock("/","get",()=> List);

在这里，使用Mock.mock( rurl?, rtype?, function( options ) )拦截路由请求的/路径，返回模拟的List列表。

rurl：拦截路径规则，可以是字符串"/"，也可以是一个正则表达式///。

若请求/?id="1"，mock的拦截路径可以写成Mock.mock(//?id="d"/,"get",()=>List)；

若需要根据请求参数不同，返回对应id的数据，则需要自己截取url字符串作判断了；

rtype：拦截请求类型，get或post；

function(options)：回调函数，拦截成功后的处理逻辑；

optioins = {url, type, body}；

url为请求地址；

type为请求类型；

body为请求时传入的数据（只在post请求时有用）；

这里，我们使用vuex作状态管理，axios请求数据：npm i -S vuex axios；

新建src/store/index.js：

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

const $setApplications = "SETAPPLICATIONS";

export default new Vuex.Store({
  state: {
    applications: null,
  },
  mutations: {
    [$setApplications]: (state, list) => state.applications = list,
  },
  actions: {
    requestApplications({ commit, state }) {
      axios.get("/")
        .then(({data:{list}}) => {
          commit($setApplications, list);
        })
        .catch(() => {
          console.log(arguments);
        })
    }
  }
})

在这里，state保存整个项目公用的状态，mutations进行同步数据处理，actions处理异步请求。

mutations是唯一修改state的入口，actions要想修改state，需要内部调用一下mutations；

在项目程序中，通过this.$store.commit("SETAPPLICATIONS",null)修改state的值。

若要传多个值，第二个参数为一个对象（不接受多个参数的传入，最多只接收两个参数）；

在项目中，通过this.$store.dispatch("requestApplications")调用一个异步请求。

若需要传参，传第二个参数（不接受多个参数的传入，最多只接收两个参数）；

目前，通过以上步骤，我们独立的构建了模拟数据和状态管理，但还没有将它们结合起来。

src/main.js中添加import "./mock"、import store from "./store"，且修改：

new Vue({
  el: "#app",
  router,
  store,
  components: { App },
  template: ""
})

结束了？

还没有，我们还要获取数据：
在src/views/vacation/index.vue中添加：

触发请求。

如果想了解Mock.js的用法，推荐看官网的"文档"页，而不是"示例"页。

Mock.js返回的数据格式都是对象，如果想获取其它格式（如数组...）需要自己另辟蹊径了。

格式：

Mock.mock({
  // 初始化对象，也是输出的对象；
})

语法规范：

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
// 属性名   name
// 生成规则 rule
// 属性值   value
"name|rule": value

属性名 和 生成规则 之间用竖线 | 分隔（千万不要带空格吖，否则，你的属性名可能会包含空格）。
生成规则 是可选的。
生成规则 有 7 种格式：
"name|min-max": value
"name|count": value
"name|min-max.dmin-dmax": value
"name|min-max.dcount": value
"name|count.dmin-dmax": value
"name|count.dcount": value
"name|+step": value
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。

如果你想验证写出来的模拟数据是否正确，可以在“示例”页打开控制台，直接运行。

Mock.mock({
  "list|1-10":[
    Random.id(),
  ]
})

安装地址

$vm0指向某一组件实例，该实例必须打开控制台的VueTab页，点击某一组件时才能获取到，否则，汇报$vm0未定义。

点击哪个组件，$vm0指向哪个组件，才能获取到该组件上的属性。

知道如何模拟数据了吧，接下来我要偷偷的模拟列表的数据了呢，你也不要忘了。

如何使用Mock.js拦截请求呢，如何获得请求时的数据呢？

如何通过axios请求数据呢，它和mutations有何区别？

懒货一枚，选择第三方列表库，如何在Vue项目中使用呢？

MockJS使用文档

MockJS示例（可通过控制台测试）

Vuex官网

Vue-router用法