Vuex
为什么使用Vuex前面在Vue实战030:子组件与父组件之间方法调用中提到了兄弟组件之间的传值及方法调用问题，我们发现兄弟组件之间要获取方法或者数据时还是比较繁琐的，需要通过共同的父组件作为通信桥梁才能实现兄弟组件之间的交互，这样父组件就需要监听大量的事件, 还需要负责分发给不同的子组件，增加了系统的负担。但有了Vuex我们就轻松多了，全局响应式更新状态，不管组件在哪里都可以直接访问。
如何使用Vuex先在项目中安装 vuex，在项目目录下使用命令安装：npm install vuex --save（在新建项目的时候可以直接勾选Vuex，系统自动创建），在main.js中引入import axios from 'vuex'，new Vue中引入store实例即可。
Vuex核心功能Vuex拥有四大核心功能模块，它们分别是State（Vuex的数据仓库）、Mutations（只能在mutations中修改state的数据状态）、Actions（异步改变共享数据）和Getters（获取state二次处理的数据），彼此间的关系如下图所示：
核心功能1: Statestate就是Vuex中的数据仓库，用于存储所有组件的公共数据，数据需初始化且不支持直接修改。直接获取state中的数据只需要在需要使用的组件页面中通过this.$store.state来获取我们定义的数据。
核心功能2:Mutations前面我们提到state中的数据是不支持直接修改的，那如果有需求要修改时怎么办，Vuex为我们专门提供了Mutations属性，用于修改state中的值，有点像C#中的get和set方法（将变量定义成私有的Private内部属性，外部只能通过get和set方法来读写该变量 ）。mutations是更改Vuex中的store中的状态的唯一方法，且为同步执行，如何调用mutations，我们可以通过 this.$store.commit('方法名'，参数)形式来调用，如登录验证成功后将token写入state中的token：
核心功能3:Actions功能类似于Mutations，目的也是为了改变state中的状态，但前面我们说mutations是更改Vuex中的store中的状态的唯一方法，那么为什么又来个actions呢，这里的actions并不是直接对state中的状态进行改变，而是间接的通过提交mutation来实现的，actions的出现弥补了mutation无法异步操作的不足，这里我通过actions来修改下token的值（将token改成123456789）。
在其他组件里执行actions里面方法的时候，只需要执行this.$store.dispatch('方法名'，参数)即可，这样就可以全局改变改变token的值了。
核心功能4:Getters 这是个计算属性，简单说就是对state中的数据进行二次运算，获取新的属性值，我们正在写的项目就运用到了相当多的计算属性，通过客户给定的基本参数将其他尺寸补齐，这就需要大量的计算属性的出现了，要想拿到这个计算属性，我们只要通过this.$store.getters.dome即可得到该值。
Modules属性除了上面我们提到的四大核心功能属性，Vuex还有一个Modules属性，当我们的项目比较大时，将所有的State、Mutations、Actions和Getters属性集中到一个文件中时就比较难维护，这时Modules就给我带来便利了，Vuex 允许我们将 store 分割到不同的模块（module）中，每个模块拥有独立的State、Mutations、Actions和Getters属性，这样我们只要在对应的模块中创建对应的store.js，然后通过Modules注册到store中即可，这样方便管理和维护。