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>

转载于:https://www.cnblogs.com/Mir-bink/p/10534156.html

Mock（模拟后端接口数据）配合Vuex的使用相关推荐

vue 项目前端模拟后端接口数据（vue2,vue3）
项目中或者平常自己创建demo的过程中,往往需要后端配合,但是有时候没有后端,又需要数据,此时就展示了我们前端的强大之处,自己模拟后端接口数据. 如果自定义一个模拟后端数据, 首先创建一个文件夹放置后 ...
vue mock模拟后台接口数据
vue mock 一.Json server 二.Mock 服务 1.安装 2.创建 Mock 3.main.js引入 4.组件中axure请求一.Json server 轻量级,将已有的json文 ...
vue项目 - Mockjs 模拟后台接口数据
Mock 可以进行生成随机数据,模拟后端接口数据,从而实现开发时,前后端分离,提高效率. 1.安装 npm i mockjs -S or yarn add mockjs 2.引入在src文件目录下, ...
Postman模拟后端接口，响应request返回response
新版postman模拟后端返回数据现在使用的是postman 9.15.2.是2022.3.18在官网下载的.有旧版本的使用方法,在文章的后面打开软件,进入自己的工作空间(workspace),如 ...
记录--如何优雅地校验后端接口数据
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助背景最近新接手了一批项目,还没来得及接新需求,一大堆bug就接踵而至,仔细一看,应该返回数组的字段返回了 null,或者没有返回,甚至返 ...
Java_定时请求后端接口数据发送RabbitMQ消息到指定MQ服务器
RabbitMQ入门参考博客:http://m.blog.csdn.net/article/details?id=50487028(内含介绍.环境配置及基本实现说明) RabbitMQ官方文档参考,发 ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...
elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格。
1.将show-summary设置为true就会在表格尾部展示合计行. <el-table:data="tableData"id="tableData"s ...
vue中根据后端接口数据控制按钮的显示与隐藏（手动添加响应式this.$set()）
项目涉及到的问题,按钮需要根据后端返回的参数情况,实现按钮的显示与隐藏. 效果如图: 1.查看后端接口 get请求,需要传businessId和compoCode两个参数,返回的data有数据就显示按 ...

Mock（模拟后端接口数据）配合Vuex的使用

Mock（模拟后端接口数据）配合Vuex的使用相关推荐

最新文章

热门文章