Vuex中发送mock请求返回数据
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属性,获取数据,否则第一次获取属性是会是空值,数据还没更新。
更多推荐
已为社区贡献2条内容
所有评论(0)