vuex state mutation action 之間關係,axios 跨域代理請求問題
阿新 • • 發佈:2019-02-09
1.vuex,狀態管理模式主要有state、view、actions三個部分,vuex通過在 main.js 中注入store,將這種狀態從根元件注入到每個子元件中,在store中匯入vuex,呼叫時需要 Vue.use(Vuex),子元件可以通過 this.$store 訪問。如果改變store 的狀態唯一方法就是提交 mutation,mutation中會接收state作為第一個引數,也可以通過actions中 commit 時傳入額外的引數,即mutation的荷載(payload),一般荷載應該是一個物件,可以傳多個欄位並且mutation會更易讀。mutation中主要就是state的變更狀態。action 通過 this.dispatch() 方法觸發,同時支援荷載方式。2.axios 跨域請求代理問題在config/index.js module.exports{ dev: { host: ' ip地址' }}中,找到proxyTbale:{'/api': {target: 'http://***.***.***.cn',changeOrigin: true,pathRewrte: { '^/api': '' // '/api'代替target裡面的地址}}}原介面:http://***.***.***.cn/one/two頁面呼叫:http://本地ip:8080/api/one/two在需要呼叫介面的元件中:this.axios.post( '/api/one/two', postData).then( response=> {console.log(response)}).catch( error=> {console.log(error)})axios預設提交的就是JSON字串const postData = {'name': 'wang','age': '21'}如果以 key: val 的形式傳參,需要對這個json物件操作,所以安裝qs( npm install qs ),再匯入( import qs form './node_modules/qs')const postData = qs.stringify({name: 'wang',age: 21})