上一篇讲到 Vuex 状态管理的内容，先来简单的回顾一下 Vuex ，Vuex 中有五个核心属性：state 、getter、mutation、action、module 。state: 存放数据状态，不能被直接的修改；getter: 基于 state 的计算属性；mutation: 直接更新 state 的多个方法的对象；action: 通过 mutation 间接更新state；module：分模块化； 在上一篇当中就使用异步请求swiperList(轮播列表)数据，认识了state,mutation,action ；那么在本篇就来讲关于 Vuex 中的同步和异步请求！

        首先现来看一下这张图，通过以下的这张图来了解同步和异步请求的流程：

         在之前讲过mutations是同步的而actions是异步的，mutations是直接的来修改state，也是唯一能修改状态的而能被Devtools(Vue拓展工具)监控的，当然可以直接的去修改state中的数据状态完全没有问题，但关于对state修改的行为没有被记录，如出现某些问题无法进行排除，所以仅有mutations ——》state 是可取的；

        下面来看这张图，从 Vue Components 中去 commit 提交到 Mutations 去修改 state 的数据，在Mutations中的行为会被 Devtools 所记录，修改完 state 会通过 get/set拦截 更新回去 ； 

流程：Vue Components —— [ commit ] —— Mutations —— State —— Vue Components

在 MusicView.vue 文件中来编写：

[ 小白注解：reqSwiperList() 是封装的接口请求函数，如果不知道可以翻看前面的篇目，内容具有渐进性，当然您也可以通过axios的请求方式来代替获取swiperList，在此记得解决跨域问题 ]

        下面来看一下获取数据是否成功？

        拿到数据不是直接去修改state，即this.$store.state.swiperList = result 是不可取的，因为该行为并不会被 Devtools 所记录，所以应该是去提交到 Mutations ;

获取数据之后不是赋值修改，而是通过 [commit] 提交到 Mutations 中去修改即可；

commit 的第一个参数就是提交到mutations处理的函数名称，第二个参数就是提交更新的数据；那么通过打印result知道，需要更新的数据就是 result.data.swiperList ，将其提交过去即可，此时不要着急运行查看是否有什么变化，因为 receive_SwiperList 函数还没在mutations中去定义；

        有的读者是前面篇目更过来的，mutations可能是单独的js文件引入的，也有的是初始化留下的文件在index.js中；写法并没有差异，仅需要在对应的mutations处编写即可：

        该行为操作会被 Devtools (Vue的拓展工具) 所记录，现在来看一下是否会被记录? 

Mutations 对 state 中的状态数据进行的修改；

数据更新之后回到 Vue Components ，来看一下视图是否发生了变化：

        到这一步关于Vuex 的同步操作就已经结束了，那么到此你对Vuex的同步是否有了更近一步的了解以及知识得以巩固呢？下面来讲Vuex中的异步操作；

        同样还是通过刚刚那张图来了解 Vuex 中的异步：

        从 Vue Components 中通过 dispatch 调用 actions 中的异步数据请求，然后不是将数据赋值修改到 state ，要保证操作行为在 Devtools 的监控范围，所以提交到 mutations 中，mutations 对state 中的数据状态进行修改，最终将结果反馈到 Vue Components ；

流程：Vue Components —— [ dispatch ] —— actions —— [ commit ] —— mutations —— state —— Vue Components

        同理，将上面完成的内容通过异步的方式来操作：

        通过this.$store.dispatch()来触发actions调用，在actions中进行异步请求数据：

        在 /store/actions.js 或 在/store/index.js对应actions的节点编写 异步数据请求：

这个reqSwiperList 在上面已经解释过了，封装的接口数据请求函数；那么到 actions 之后，不能直接将数据赋值到 state ，而是通过提交到 Mutations ，通过 Mutations 来修改 state 数据的行为在 Devtools 的数据监控范围 ，所以要提交到 Mutations 去处理；

        /store/mutations.js 的文件内容基本不变，将传递过来的数据在 Mutations 中赋值修改到 state中去即可；

        最后这一个环节基本跟同步一致的了，所以就一块来看：

        可以看到异步请求也同样请求成功了，讲到这里Vuex的同步和异步就已经结束了，来简单的总结同步和异步，异步比同步操作多了一个actions流程，通过dispatch分发actions来进行异步数据请求操作！通过本篇对于同步和异步的操作能够对你有所帮助，感谢大家的支持！