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

})