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>