mock.js
var Mock = require('mockjs')
var fs =require('fs')
var Random = Mock.Random
//保存數(shù)據(jù)
var arr=[]
//動態(tài)生成4W條數(shù)據(jù)
for(let i=1;i<40000;i++){
 //生成隨機項
 let name=Random.cname();
 let age=Mock.mock({"age|1-100": 100 }).age
 let home=Random.province();
 let sex=Random.pick(["男","女"]);
 let education=Random.pick(["初中","高中","專科","本科"]);
 arr.push({"id":i,name,age,home,sex,education})
}
//寫入文件
fs.writeFile("db.json", JSON.stringify( {"student": arr}),function(){
 console.log("done")
})

devServer: {
  proxy: {
   '/api': {
   target: 'http://localhost:3000',
   pathRewrite: {'^/api' : ''}
   }
  }
  }

//info.js
 export default{
 //命名空間
 namespaced:true,
 //狀態(tài)管理
 state:{
  arr:[]
 },
 //無副作用方法,唯一用于改變state的地方
 mutations:{
  changeArr(state,{arr}){
   state.arr=arr;
  }
 },
 //副作用方法,用于進行邏輯判斷,以及拉取數(shù)據(jù)
 actions:{
  loadInfo({commit}){
   $.get("/api/student?_limit=10",function(data,statu,xhr){
    commit("changeArr",{arr:data})
   })
  }
 }
}
//index.js
import info from "./info"
export default{
 modules:{
  info
 }
}

//main.js原有基礎上中加入如下代碼
import Vuex from "vuex";
import store from "./store/index";
Vue.use(Vuex)
new Vue({
 el:"#app",
 render(h){
  return h(App)
 },
 //將store注冊到prototype上
 store: new Vuex.Store(store)
})

//app.vue組件
<template>
 <div>
 //獲取Vuex中的數(shù)據(jù)
  {{$store.state.info.arr}}
 </div>
</template>
<script>
 export default {
  //組件創(chuàng)建時調用loadInfo方法拉取數(shù)據(jù)
   created(){
  this.$store.dispatch("info/loadInfo")
  } 
 }
</script>

<link rel="stylesheet" href="./node_modules/iview/dist/styles/iview.css" rel="external nofollow" >