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