摘要：若需要傳參，傳第二個(gè)參數(shù)不接受多個(gè)參數(shù)的傳入，最多只接收兩個(gè)參數(shù)請(qǐng)求數(shù)據(jù)目前，通過(guò)以上步驟，我們獨(dú)立的構(gòu)建了模擬數(shù)據(jù)和狀態(tài)管理，但還沒有將它們結(jié)合起來(lái)。驗(yàn)證如果你想驗(yàn)證寫出來(lái)的模擬數(shù)據(jù)是否正確，可以在示例頁(yè)打開控制臺(tái)，直接運(yùn)行。

關(guān)于模擬數(shù)據(jù)，這里使用Mock.js這個(gè)庫(kù)，關(guān)于用法，官網(wǎng)說(shuō)的也比較詳細(xì)，這里我就簡(jiǎn)單的帶一下。

我們先將項(xiàng)目中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：

在手機(jī)模式下，顯示效果如下：

在項(xiàng)目根目錄下，使用命令行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()的簡(jiǎn)寫形式；

這里的"@id"（稱為“占位符”）必須使用引號(hào)包裹；

這里的"@id" + 111會(huì)是將"@id"當(dāng)作字符串（返回"@id111"），不等于Random.id() + 111；

新建src/mock/index.js：

Mock.js攔截請(qǐng)求地址：

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

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

在這里，使用Mock.mock( rurl?, rtype?, function( options ) )攔截路由請(qǐng)求的/路徑，返回模擬的List列表。

rurl：攔截路徑規(guī)則，可以是字符串"/"，也可以是一個(gè)正則表達(dá)式///。

若請(qǐng)求/?id="1"，mock的攔截路徑可以寫成Mock.mock(//?id="d"/,"get",()=>List)；

若需要根據(jù)請(qǐng)求參數(shù)不同，返回對(duì)應(yīng)id的數(shù)據(jù)，則需要自己截取url字符串作判斷了；

rtype：攔截請(qǐng)求類型，get或post；

function(options)：回調(diào)函數(shù)，攔截成功后的處理邏輯；

optioins = {url, type, body}；

url為請(qǐng)求地址；

type為請(qǐng)求類型；

body為請(qǐng)求時(shí)傳入的數(shù)據(jù)（只在post請(qǐng)求時(shí)有用）；

這里，我們使用vuex作狀態(tài)管理，axios請(qǐng)求數(shù)據(jù)：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保存整個(gè)項(xiàng)目公用的狀態(tài)，mutations進(jìn)行同步數(shù)據(jù)處理，actions處理異步請(qǐng)求。

mutations是唯一修改state的入口，actions要想修改state，需要內(nèi)部調(diào)用一下mutations；

在項(xiàng)目程序中，通過(guò)this.$store.commit("SETAPPLICATIONS",null)修改state的值。

若要傳多個(gè)值，第二個(gè)參數(shù)為一個(gè)對(duì)象（不接受多個(gè)參數(shù)的傳入，最多只接收兩個(gè)參數(shù)）；

在項(xiàng)目中，通過(guò)this.$store.dispatch("requestApplications")調(diào)用一個(gè)異步請(qǐng)求。

若需要傳參，傳第二個(gè)參數(shù)（不接受多個(gè)參數(shù)的傳入，最多只接收兩個(gè)參數(shù)）；

目前，通過(guò)以上步驟，我們獨(dú)立的構(gòu)建了模擬數(shù)據(jù)和狀態(tài)管理，但還沒有將它們結(jié)合起來(lái)。

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

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

結(jié)束了？

還沒有，我們還要獲取數(shù)據(jù)：
在src/views/vacation/index.vue中添加：

觸發(fā)請(qǐng)求。

如果想了解Mock.js的用法，推薦看官網(wǎng)的"文檔"頁(yè)，而不是"示例"頁(yè)。

Mock.js返回的數(shù)據(jù)格式都是對(duì)象，如果想獲取其它格式（如數(shù)組...）需要自己另辟蹊徑了。

格式：

Mock.mock({
  // 初始化對(duì)象，也是輸出的對(duì)象；
})

語(yǔ)法規(guī)范：

數(shù)據(jù)模板中的每個(gè)屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則、屬性值：
// 屬性名   name
// 生成規(guī)則 rule
// 屬性值   value
"name|rule": value

屬性名 和 生成規(guī)則 之間用豎線 | 分隔（千萬(wàn)不要帶空格吖，否則，你的屬性名可能會(huì)包含空格）。
生成規(guī)則 是可選的。
生成規(guī)則 有 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
生成規(guī)則 的 含義 需要依賴 屬性值的類型 才能確定。
屬性值 中可以含有 @占位符。
屬性值 還指定了最終值的初始值和類型。

如果你想驗(yàn)證寫出來(lái)的模擬數(shù)據(jù)是否正確，可以在“示例”頁(yè)打開控制臺(tái)，直接運(yùn)行。

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

安裝地址

$vm0指向某一組件實(shí)例，該實(shí)例必須打開控制臺(tái)的VueTab頁(yè)，點(diǎn)擊某一組件時(shí)才能獲取到，否則，匯報(bào)$vm0未定義。

點(diǎn)擊哪個(gè)組件，$vm0指向哪個(gè)組件，才能獲取到該組件上的屬性。

知道如何模擬數(shù)據(jù)了吧，接下來(lái)我要偷偷的模擬列表的數(shù)據(jù)了呢，你也不要忘了。

如何使用Mock.js攔截請(qǐng)求呢，如何獲得請(qǐng)求時(shí)的數(shù)據(jù)呢？

如何通過(guò)axios請(qǐng)求數(shù)據(jù)呢，它和mutations有何區(qū)別？

懶貨一枚，選擇第三方列表庫(kù)，如何在Vue項(xiàng)目中使用呢？

MockJS使用文檔

MockJS示例（可通過(guò)控制臺(tái)測(cè)試）

Vuex官網(wǎng)

Vue-router用法