在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屬性，獲取資料，否則第一次獲取屬性是會是空值，資料還沒更新，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/46101.html
標籤：其他