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