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({
     
	// 相当于 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属性，获取数据，否则第一次获取属性是会是空值，数据还没更新。