action 异步修改 state 的值。说白了，action也是一个存放修改state方法的仓库，但是 这些方法都是要调axios请求的(所以叫异步)，请求完事了，再调 mutations 去同步修改state的值。所谓的异步都是我们自己写的。当然你不这么写也行，只是设计者的初衷是想让让开发者清楚异步修改的概念，虽然暂时没有解决根本问题。
这里涉及到axios请求，这个下边解释，暂时先清楚 action的概念。
4. vuex和组件通信
上述介绍了 vuex的几个部分的作用，那现在就是如何在组件中去使用 vuex
首先，在main.js中，你需要将store对象引入到整个应用中
new Vue({ el: '#app', router, store, render: h => h(App) })
然后在组件中使用
// 直接使用 <alert v-if="this.$store.state.alertFlag.state"></alert> // 同步的 commit this.$store.commit('SET_ALERT_DETAIL', {title: '提示', content: '您确定要还款吗？'} // 异步的 dispatch this.$store.dispatch('actionTest').then(() => {})
简单介绍一下：
this.$store.state. 我们通过$store对象 ，直接使用state中的属性
this.$store.commit('', {}) 通过 commit 方法调 mutations-types 中的方法（其实就是mutations的方法），这步是同步的，而且数据会自动监听变化就行渲染
this.$store.dispatch('actionTest').then(() => {}) 通过 dispatch 的方法调 action 的方法，异步修改 state
注：vue中的这个 this 注意他的指向，建议不确定时，先将this赋给变量保存起来，有时经常会和window对象混淆。
以上就是vuex最基础的用法，也是最常用的方法。其他的像 getters 、如何组件中引入vuex等等，这里就不细说了，大家可以根据自身需求自行看文档补充。
五、 封装axios
在一个完整的项目中，我们的和服务端的交互会很频繁，一个项目会有很多请求，冗余代码很多。所以将请求封装，统一管理还是很有必要的。我们现在做一个简单的封装。
1. 先看一下结构
2. 看一下具体代码
axios.js 文件
import axios from 'axios' // 创建axios实例 application/x-www-data-urlencoded application/json const service = axios.create({ baseURL: 'http://www.niepengfei.cn/PHPFile/ybtDemo/', timeout: 15000, headers: {'Content-Type': 'application/json'} }) service.interceptors.response.use( function(response) { // 请求正常则返回,这里返回了所有的请求头和请求体信息 return Promise.resolve(response) }, function(error) { // 请求错误则向store commit这个状态变化 const httpError = { alertFlag: true, errorStatus: error.response.status, msgg: error.response.statusText } this.$store.commit('SET_ALERT_FLAG', {state: false, type: 'ok'}) console.log(httpError) return Promise.reject(error) } ) export default service
index.js 文件
import request from './axios.js' export function getTest(axiosData) { var data = { url: '', method: 'post', data: '' } // 合成请求对象 Object.assign(data, axiosData) return request(data) }
这里我们仅仅做了post 请求的封装。先对axios做上默认请求的数据，封装成函数，有传参就合并修改参数数据，请求结束之后，根据response、error，分成成功和失败两个函数，并将整个promise对象返回。对于请求的拦截这里没做。而且对网络请求的错误码也是大家根据项目具体提示的。我这里也不做详细的说明了
3. 组件中使用
import { getTest } from '../../server/index.js' getTest({ url: 'login.php', data: JSON.stringify({ 'phone': thiss.phone, 'phoneCode': thiss.phoneCode }) }) .then(response => { console.log(response.data) if (response.data.code === '0000') { ... } })
将封装的axios引入组件，然后直接调用即可
六、总结
以上就是 vuex+axios封装的实例，时间原因，这里进提供思路和简单的实现方法，至于具体项目具体分析，axios要怎么封装，vuex还需做什么监听，那就是大家为自己项目定制的东西了。