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>