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

關(guān)于模擬數(shù)據(jù)，這里使用Mock.js這個庫，關(guān)于用法，官網(wǎ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：

在手機模式下，顯示效果如下：

在項目根目錄下，使用命令行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：攔截路徑規(guī)則，可以是字符串"/"，也可以是一個正則表達式///。

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

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

rtype：攔截請求類型，get或post；

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

optioins = {url, type, body}；

url為請求地址；

type為請求類型；

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

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

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

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

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

在項目中，通過this.$store.dispatch("requestApplications")調(diào)用一個異步請求。

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

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

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ā)請求。

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

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

格式：

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

語法規(guī)范：

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

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

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

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

安裝地址

$vm0指向某一組件實例，該實例必須打開控制臺的VueTab頁，點擊某一組件時才能獲取到，否則，匯報$vm0未定義。

點擊哪個組件，$vm0指向哪個組件，才能獲取到該組件上的屬性。

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

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

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

懶貨一枚，選擇第三方列表庫，如何在Vue項目中使用呢？

MockJS使用文檔

MockJS示例（可通過控制臺測試）

Vuex官網(wǎng)

Vue-router用法