vuex state mutation action 之间关系,axios 跨域代理请求问题

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
})

你可能感兴趣的:(Vue.js)