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>