在SPA单网页模块的合作开发中 Vue的vuex和React的Redux 提督称为同一个状况管理工作，个人的认知是自上而下状况管理工作更最合适；单纯的认知是你在state中表述了三个统计数据后，你能在所处工程项目中的任何人一
具体来说要加装、采用 vuex
具体来说在 vue 2.0+ 你的vue-cli工程项目中加装 vuex :然后 在src二百一十三下增建三个名叫store的配置文档，为方便快捷导入并在store配置文档里增建三个index.js,里头的内容如下表所示:
接下去，在 main.js里头导入store，接着再自上而下转化成一下，这样一来就能在任何人三个模块里头采用this.$store了：
说了上面的序曲后，接下去是列入自问自答了，是首章说的state的动作游戏。回到store文档的index.js里头，他们先新闻稿三个state表达式，并表达式三个空第一类给它，里头就行了表述三个如上所述属性值；接着再在示例化的Vuex.Store里头传至三个空第一类，并把刚新闻稿的表达式state仍里头：
实际上略过上面的三个关键步骤后，你已经能用
this.store性computed那样，来动态窃听state值的变化(新一代状况)，并把它也仍进Vuex.Store里头，具体内容看上面标识符:光有表述的state的常量，不发生改变它并非他们想的市场需求，接下去没错的是mutations了，mutattions也是三个第一类，那个第一类里头能放发生改变state的常量的方式，具体内容的用语是给里头的方式传至模块state或附加的模块,接着利用vue的单向统计数据驱动力进行值的发生改变，同样的表述好后也把那个mutations丢进Vuex.Store里头，如下表所示：
这时你完全能用 this.store.commit(hide) 以及 this.store.commit(newNum,sum)方式,三个模块里用执行得到的值，每天都是那样的，这样的确并非平庸的市场需求
我他们是一位专门从事了多年合作开发的web后端老开发人员，目前请辞在做他们的web后端商业机构订制专业课程，今年初我花了三个月重新整理了这份最
好在vuex非官方API还提供了三个actions，那个actions也是个第一类表达式，最大的作用是里头的Action方式 能包含任意异步操作，这里头的方式是用来异步触发mutations里头的方式，actions里头自表述的函数接收三个context模块和要变化的形参，context与store示例具有相同的方式和属性，所以它能执行context.commit( ),接着也不要忘了把它也丢进Vuex.Store里头：
而在外部模块里进行自上而下执行actions里头方式的时候，你只需要用执行
this.$store.dispatch(hideFooter)
或this.$store.dispatch(showFooter)
以及this.$store.dispatch(getNewNum，6) //6要变化的实参
这样就能自上而下发生改变发生改变showfooter或changebleNum的值了，如下表所示面的模块中,市场需求是跳转模块网页后，根据当前所处的路由网页进行隐藏或显示网页底部的tabs选项卡
至此就能做到一呼百应的自上而下响应状况发生改变了！
modules 模块化 以及 模块中导入 mapGetters、mapActions 和 mapStates的采用
因为在大多数的工程项目中，他们对于自上而下状况的管理工作并不仅仅一种情况的市场需求，有时有多方面的市场需求，比如写三个商城工程项目，你所用到的自上而下state可能是关于购物车这一块儿的也有可能是关于商品价格这一块儿的；像这样的情况他们就要考虑采用vuex中的 modules 模块化了，具体内容怎么采用modules呢？咱们继续一步一步的走：
具体来说，在store配置文档上面增建三个modules配置文档，接着在modules文档里头建立需要管理工作状况的js文档，既然要把不同部分的状况分开管理工作，那就要把它们给分成独立的状况文档了，如下表所示图：
image.png
而对应的store配置文档上面的index.js 里头的内容就直接改写成：
相应的js，其中的 namespaced:true 表示当你需要在别的文档里头采用( mapGetters、mapActions 接下去会说 )时，里头的方式需要注明来自哪三个模块的方式:
这样一改就有了关于三个模块的state管理工作文档了 footerStatus.js和collection.js，现在你要运行当前的标识符话，工程项目会报错！因为他们把上面的标识符模块化分开了，引用的地方还没有改。接下去咱们一起来看看 mapState,mapGetters,mapActions的采用，具体来说 在需要用的 模块里头先导入 import {mapState,mapGetters,mapActions} from vuex;咱们先修正一下隐藏或显示网页底部的tabs选项卡（是上面举的临时例子）的模块标识符
现在工程项目标识符应该就不会报错了，好,最后咱们再来看一下mapActions的用语，实际上上面的this.$store.dispatch(footerStatus/showFooter)已经算是一种执行相应模块的action里的方式了，但有时会牵扯的事件的触发及传值，那就会有上面的mapActions用语了,还记得上面的另一个模块collection.js吗？来看一下里头的actions中的方式结构：
需要传值来动态变动state.collects里的统计数据，那的确要在执行它的地方进行传值了，所以上面用到它的地方他们用了个@click来执行那个invokePushItems方式了，并且传至相应的第一类统计数据item,如下表所示：
如此一来，在那个模块里头操作的 collecttion.js 中的state的统计数据，在其他的任何人的三个组
至此，vuex中的常用的一些知识点采用算是单纯的分享完了，当然了，相信这些只是一些皮毛！只能说是给予刚接触vuex的初学者三个参考与了解吧！有哪里不明白的或不对的，留言下，咱们能一起讨论、共同学习！
作者：倚剑闯天涯_
链接：
https://www.jianshu.com/p/b89297aaca36
