实战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：

<template>
  <div>list view</div>
</template>

显示效果

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

模拟数据

在项目根目录下，使用命令行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: '<App/>'
})

结束了？

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

<script>
export default {
  beforeCreate(){
    this.$store.dispatch('requestApplications');
  }
}
</script>

触发请求。

请求结果

Mock.js用法

如果想了解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(),
  ]
})

测试结果

vue-devtools

安装地址

使用提醒

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

章节回顾

• 知道如何模拟数据了吧，接下来我要偷偷的模拟列表的数据了呢，你也不要忘了。
• 如何使用Mock.js拦截请求呢，如何获得请求时的数据呢？
• 如何通过axios请求数据呢，它和mutations有何区别？

思考

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

相关的官方文档

MockJS使用文档

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

Vuex官网

番外

Vue-router用法