Vuex中发送mock请求返回数据 JS 正则表达式详解 学习笔记 花了30分钟,给女朋友们写了个最近抖音很火的3D立体动态相册 这 16 个 CSS 伪类,助你提升布局效率! Mysql系列第八讲 详解排序和分页(order by & limit)及存在的坑 SQL语句的一些应用语句 介绍三个开发技术小知识点 数据库系统概论(1) Mysql备份和恢复的类型,备份恢复的几种方法! --个人整理 MySql数据库基本操作(一) 前八月融合创新提升服务,大数据搭建信息网 长三角税收一体化按下“快进键” 一些建议:给当年刚做程序员的我 谁是物联网江湖明日之星?答案是新CIoT 企业信用有效“变现” 江苏银行物联网金融规模达185亿 2020年中国5G物联网行业:中国通信运营商5G投资达1.23万亿元-可下载 搭建 GFS 分布式文件系统-----实操 排障集锦:九九八十一难之第十五难!-------------史上最全rsync报错详解 docker系列1---docker隔离和限制技术 Linux系统安全及应用加固———最适合新手学,新手都能看懂!超详细的理论+超详细的实验!呕心沥血之作完成! LAMP架构集成ownCloud搭建私有云盘 Shell脚本正则表达式(一) Linux第一人称侵入进程的好地方 Windows DOS常用命令(持续更新完善) 大数据驱动新材料研发 变革从内而发,一站式大数据平台和多模数据库雄起 雕佛像、打棒球、开飞机、去北极,这个90后程序员有点不一样 12项特色功能构建施工现场“物联网” 400亿美元!英伟达收购Arm 软银套现离场物联网梦醒 卫星物联网再次引发热议,原因在这里 信用飞:航旅行业数字化前景可期,大数据预防砍头息乱象 大数据加持自动驾驶产业发展 上海智能网联汽车公共数据中心揭牌 恒久科技(002808.SZ):子公司闽保信息与鸿达兴业签署智能制造及大数据平台综合应用项目战略合作框架协议 工业平板电脑如何在物联网中发挥作用? 400亿美元!英伟达收购Arm 软银套现离场物联网梦醒 “数字心脏”动态解析消费密码——国家级消费市场大数据联合实验 重庆:大数据智能化牵引产业结构调整质效提升 分析物联网技术在智能家居中的应用场景 国家级消费市场大数据联合实验室在上海先行先试 山西吕梁培训搬迁户成为大数据标注员 昔日贫困户,玩转高科技 知乎热议:2020年程序员是否过剩? 柯建东:宁波抢抓工业物联网新机遇,要做好四个平台建设 旷视:城市物联网的实现,是从超级应用到操作系统的沉淀过程 排障集合———忘记原密码,如何重新修改MySQL登入密码 【Redis】主从复制 网易2021批笔试题解 msf工具之木马程序制作以及伪装 【JAVA】滴滴-2021校招在线笔试-DE数据开发试卷-0913 机器学习13 -- 无监督学习之自监督 2020年全国数学建模大赛 B题部分代码和模型的建立 jumpserver安装(centos)
您的位置:首页 >程序人生 >

Vuex中发送mock请求返回数据

在store的vuex中发送请求数据,mock收到请求进行拦截,返回数据

vuex

!!(vue初始化执行的生命周期函数都是同步,在vuex中请求的数据是异步任务,同步脚本执行完才会发起异步请求)

import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios';import mockdata from '@/mock/mockServer.js';Vue.use(Vuex)// 数据状态管理器export default new Vuex.Store({// 相当于 datastate: {data:[],},// 相当于computedgetters:{getGoodList(state){return state.goodList;}},// 相当于 methods mutations: {//得到mock请求的数据addData(state,res){//在方法中调用state.data = res},},// 相当于 异步promise之后的methodsactions: {addData(context){//使用axios发送请求,注意是异步axios.get('msg').then(res=>{context.commit('addData',res);})},},// 模块modules: {}})

在需要的地方获取vuex的mock数据

<script>//引入vuex辅助函数import {mapState, mapMutations, mapActions, mapGetters} from "vuex"//引入jsonpimport jsonp from 'jsonp'import axios from 'axios';import mockdata from '@/mock/mockServer.js';export default{data(){return{},// 获取放在vuex的mock请求数据computed:{ //需用computed属性声明获取数据datas:function(){return this.$store.state.data.data},// ...mapState(["data"])辅助函数用法},methods:{// 加入购物车...mapMutations(['addcar'])},created() {//启用vuex的请求mock数据方法this.$store.dispatch('addData')},}</script>

注意。。。因为vuex的中请求mock的actions属于异步请求,所以需要使用computed属性,获取数据,否则第一次获取属性是会是空值,数据还没更新。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。