Mock（模擬後端接口數據）配合Vuex的使用

1.下載Mock  cnpm install Mockjs -S

2.新建一個data.js存放新生成的mock文件

編輯mock  並導出

const Mock = require('mockjs'); let data = Mock.mock({ "data|10":[{ "date":'@date(yyyy-MM-dd)', "name":'@cname()', "adress":'@county(true)', "image":"@image( '200x100', '#ffcc33', 'skybule', 'gif', 'text' )" }] }) // console.log(data) function pageGoods(){ return data.data } export default { pageGoods }

3.新建一個mock.js接收data.js中的 數據

import Mock from "mockjs" import a from "../../../server/data.js" Mock.mock(/\/goodslist/,"get",a.pageGoods) //請求的路徑 請求的方式 回調函數

同時在apis中定義請求的路徑供 Mock.mock中的路徑使用 

import http from "../utils/http"; export const goodslist = ()=>http("get","/goodslist")

4.而後在state中的action中 引入goodlist  並觸發函數

import {goodslist} from "../../apis/good.js" export default{ async handleData({commit}){ let data = await goodslist(); commit("handleData",data); console.log(data) } }

頁面中 method中action映射，created()中觸發函數

methods:{ ...Vuex.mapActions({ handleData:"loginPassword/handleData" }) }

created()
{
 this.handleData()

}

state中的mutation中傳遞

 handleData(state,data){ state.goods = data; }

state中映射數據

export default{ goods:[] }

5.頁面中computed渲染

computed:{ ...Vuex.mapState({ goods:state=>state.loginPassword.goods }) }

最後循環出結果

<div class="foot" v-for="(item,index) in goods">{{item.name}}</div>