實戰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用法