Vuex中发送mock请求返回数据

   日期:2020-09-16     浏览:101    评论:0    
核心提示:vuex像是一个仓库,可以将需要传递的数据放进去,使用的时候再取出来。
在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({  	// 相当于 data   state: {  	  data:[],   },   // 相当于computed   getters:{  	  getGoodList(state){  		  return state.goodList; 	  }   },   // 相当于 methods    mutations: {  	  //得到mock请求的数据 	  addData(state,res){   //在方法中调用 	  	state.data = res 	  }, 	     },   // 相当于 异步promise之后的methods   actions: {  	  addData(context){   //使用axios发送请求,注意是异步 	  	axios.get('msg').then(res=>{  	  		context.commit('addData',res); 	  	}) 	  },   },   // 模块   modules: {    } })  

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

<script> 	//引入vuex辅助函数 	import { mapState, mapMutations, mapActions, mapGetters} from "vuex" 	//引入jsonp 	import 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属性,获取数据,否则第一次获取属性是会是空值,数据还没更新。

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服