前言
距离上次写blog隔了好久好久。今天主要是来总结一下vuex中的数据流向的问题。
翻看上次写的react-redux的总结，发现最后的预告是写关于flex布局。flex需要IE11以上才能够使用，然而由于现在做webApp不用管IE，而且vue也是需要IE8以上，所以flex布局也时非常实用的。那么下一次结合vue，做一个简单的小实验，vue+flex+vw,wh来实现一个响应式的页面，依次来对flex布局进行总结吧。
正文
vuex是针对vue的一套数据管理的状态管理模式。听名字就可以知道，它也时能够追溯到flux架构的，这种架构非常清晰的将web应用的分工进行了精美的划分。
谈到flux就必须谈到三个概念了 store action view.以我的理解，实际上就是web前段里的mvc。用户通过view触发action，action改变store，store更新后改变view。
flux本身的意思也就是溶解，redux是借鉴了flux的思想，通过引入reducer将整个结构变得更精美了~
在vuex中，我们的mutations其实相当于redux中的reducer。
那么vuex的整个全貌是怎么样的呢？
从图上可以清晰的看到整个结构，action是mutation的组合，mutation改变state，从而改变我们view，用户来触发actions。值得一提的是，我们可以划分小的模块，在模块内也有对应的actions,mutations,state，这样一来整个大的store也就构建了起来！
目录结构是类似这样的
整个store数里分为modules模块，模块内有对应的actions,mutations,getters，大的store也有actions,mutations,getters，顶层可以通过state.(模块名字)来访问到模块的state。mutation-types是把mutations进行了命名的归类，这跟redux也很像。
然后是关于actions和mutation的payload，开始一直没明白payload和state是如何联系的。以及actions和mutations中的commit是怎么来的。
首先payload，是你需要传递给mutation和actions的参数实际传入的对象或者值是在组件内写逻辑的时候将值传入的，可以是state，getters。当然，通过解构赋值，我们可以从传入的值内，把所需要的参数中的值剥离出来当做payload传递给我们的mutations,actions。对了，之前提到的commit也是通解构赋值传递的，actions拥有context对象，可以通过解构将state,commit,getters,dispatch（action调用action）抽取来使用。
最后是mapstate,mapgetters,mapActions,mapmutations。
可以通过import {} from ‘vuex’来引入，这几个函数能够将所有的state,getters,actions,mutations剥离出来方便我们使用。当同时存在vuex属性和自己再组件内定义的其他属性时，我们可以通过…mapstate,…mapgetters,（ES7）对象展开符，把得到的对象展开到compute,methods中来使用。这些map函数跟react-redux中两个mapStateToProps和mapDispatchToProps有类似的作用。将组件和vuex数据进行了连接。
结语
前言已经做了预告了。这次总结非常的简单，并没有挖掘的非常深入。通过学习者两个框架，对web如今的潮流更加的清晰了。flux真的是非常的精美啊！