1.Vuex是甚么
非官方表明：Vuex 是两个专为 Vue.js 应用领域软件开发的状况区域化 + 库。它选用封闭式repeats应用领域的大部份模块的状况，并以适当的准则确保状况以一类可预估的形式发生改变。
接下去用两张图单纯表明下：
（相片源自非官方网站https://vuex.vuejs.org/zh/）
状况管理组织工作包涵下列几部份：
1）State（状况），驱动力应用领域的管理组织工作工具。
2）View（快照），以新闻稿形式将状况态射到快照。
3）Actions（操作方式），积极响应快照上的使用者输出引致的状况变动。
当多模块共享状况时，单流向的数据的简洁性很容易被破坏：
1）多个View依赖两个状况
2）不同快照行为需要变更同一状况。
针对问题1：传参的形式对多层嵌套模块十分繁琐，对兄弟模块的状况传递无能为力。问题2：父子模块直接引用或者通过事件更改状况，通常 会引致代码复杂度增加，难以维护。
那么甚么场景下适合使用？
众所周知，Vue都是单页面应用领域程序，模块之间互相嵌套，可能会出现多层级嵌套情况，举例 A模块嵌入B模块，B模块嵌入C模块，此时，A需要向C传值更改状况，使用props，ref等形式需要通过B才能传递到C，这种写法大大增加开发量，代码显得冗余繁琐，此时如果存在两个全局状况，A模块只要更改了状况，C模块即可同步状况，代码将会变得结构化且易维护。
2.安装步骤
1）工程目录执行命令：npm install vuex –save.
2）packageJson.js文件查看 vuex版本号，如果存在表明安装成功。
3）src下新建stroe文件夹和modules文件夹。
4） 在main.js文件引入vuex并注册store.
完成上面步骤就可以使用vuex了。
3.核心理念属性
3.1 State
state里面定义属性存放数据，类似java中的实体类，支持数据类型也很丰富如对象、字符、数组。默认值可以使用三元判断、初始化函数。这些定义的属性全局共享，使用：<span>{{$store.state.info}}</span>。
3.2 Getter
类似于模块的计算属性。
getters可以接受两个参数，两个是state，另两个是其他getter。
模块写法：this.$store.getter.getSidebar
注意：getter通过属性访问时是作为Vue积极响应式系统一部份缓存其中的。
3.3 Mutation
Mutation是对状况更改的唯一地方，每个mutation有两个字符串事件类型和回调函数，回调函数是实际更改状况的，但是这些函数不能直接被调用，需要使用store.commit()方法才能唤醒mutation。
模块写法：this.$store.commit(‘setList’,data)。
注意：mutation必须是同步函数。
3.4 Action
Action实现异步调用，但是不会直接更改状况，而是通过store.commit 访问mutation中的函数进行状况修改，既然是异步函数，其实可以发ajax请求，将需要信息存储state中。模块中写法this.$store.dispatch(‘xxx’,data)。
3.5 Module
大部份的状况定义在两个state中，随着功能不断新增而难以维护。根据功能定义不同子模块Module，每个子模块都会包涵 state、getter、mutation、action。再将module注册到store模块中，从而实现分模块管理组织工作，聚合注册。
Store文件夹下modules文件存放子模块，在index.js文件中引入子模块文件。最终将store/index.js 文件注册到全局main.js。
这样各模块的state都是局部变量。那如何正确访问子模块的state对象呢？
命名空间 添加 namespace:true
当模块被注册后，它的大部份 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
举例：
This.$store.commit(‘xxx’) 变为 This.$store.commit(‘app/xxx’)
4.常用辅助函数
4.1 Mapsate
在组件中引入vuex，computed中定义mapState函数，原因是mapState辅助函数生成计算属性。这里的…是对象的展开运算符，整体来看是对象的合并。
4.2 mapGetters
从getter获取的实质是state中的属性值，mapGetters辅助函数生成计算属性，定义在computed中，直接this访问。
4.3 mapMutations
原来写法this.$store.commit(‘setList’,’5’)，在使用辅助函数情况下，只需要methods中定义单纯方便，通过this对象直接调用传参数更新状况。
4.4 mapActions
模块中使用mapActions,放置在methods里面。mapActions 辅助函数将模块的 methods 态射为 store.dispatch 调用。
5. Vuex的组织工作基本原理
（相片源自非官方网站https://vuex.vuejs.org/zh/）
Vuex实现单向数据流向，全局存储两个state。模块通过dispatch调用Actions中的方法，虽然Actions不会直接改变state中属性状况，但是能够调用后端API，存储常用基本信息。Actions函数通过commit（‘xxx’）执行Mutions方法修改state的数据。
debug时，Devtools可以查看mutation的日志，devtools会捕捉到前一状况和后一状况的快照，如果mutation中存在异步函数，这是无法捕获到的，因为因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道甚么时候回调函数实际上被调用。
当前面步骤执行完，状况会渲染到快照。
6. 其他模块间通信形式
1）props: 父模块向子模块传值，单向绑定，不可逆。
2）$emit: 子模块向父模块传值，同时也支持回调函数。
3）ref/$refs: ref应用领域子模块上，它指向子组件实例，通过实例访问模块的数据和方法。
4）$parent: 通过this.$parent可以访问父模块实例（指引入子模块的父模块）。
5）$children: 通过this.$children可以访问子
7. 小结
1）Vuex提供了全局的状况管理组织工作，易于开发和维护。
2）Vuex中的state是积极响应式，一旦发生改变，页面同步渲染。
3）模块间通信又提供一类解决方案，特别是非父子模块之间。
4）作为缓存工具，类似于localStroage，项目加载时存储不频繁更改的数据比如登录使用者的基本信息。
5）Vuex自身也存在缺点，浏览器刷新，state重新初始化。Vuex的vuex-persistedstate插件解决状况不持久问题。
总之，Vuex是一款非常实用的模块，学习运用难度不大，但开发者需结合实际情况选择合适的技术。
作者简介
▶▶▶
Hello
陈德春，现任职于北银金融科技有限责任公司银行转型业务开发部。JAVA开发工程师，擅长全栈技术开发。
招聘启事
北银金融科技有限责任公司根植于北京银行，是一家致力于大数据、人工智能、云计算、区块链、物联网等新技术创新与金融科技应用领域的科技企业，公司充分发挥北京银行企业文化和技术积淀先天优势，通过对技术、场景、生态的完美融合，输出科技创新产品和技术服务。
现诚邀优秀人才加盟
共享金融科技时代硕果
期待您的加入
