Vue实战033：Vuex五大功能模块使用入门详解

1、为什么使用Vuex前面在Vue实战030:子组件与父组件之间方法调用中提到了兄弟组件之间的传值及方法调用问题，我们发现兄弟组件之间要获取方法或者数据时还是比较繁琐的，需要通过共同的父组件作为通信桥梁才能实现兄弟组件之间的交互，这样父组件就需要监听大量的事件, 还需要负责分发给不同的子组件，增加了系统的负担。但有了Vuex我们就轻松多了，全局响应式更新状态，不管组件在哪里都可以直接访问。

3、Vuex核心功能Vuex拥有四大核心功能模块，它们分别是State（Vuex的数据仓库）、Mutations（只能在mutations中修改state的数据状态）、Actions（异步改变共享数据）和Getters（获取state二次处理的数据），彼此间的关系如下图所示：

5、核心功能2:Mutations前面我们提到state中的数据是不支持直接修改的，那如果有需求要修改时怎么办，Vuex为我们专门提供了Mutations属性，用于修改state中的值，有点像C#中的get和set方法（将变量定义成私有的Private内部属性，外部只能通过get和set方法来读写该变量）。mutations是更改Vuex中的store中的状态的唯一方法，且为同步执行，如何调用mutations，我们可以通过this.$store.commit('方法名'，参数)形式来调用，如登录验证成功后将token写入state中的token：

7、在其他组件里执行actions里面方法的时候，只需要执行this.$store.dispatch('方法名'，参数)即可，这样就可以全局改变改变token的值了。

9、Modules属性除了上面我们提到的四大核心功能属性，Vue垓矗梅吒x还有一个Modules属性，当我们的项目比较大时，将所有的State、Mutatio荏鱿胫协ns、Actions和Getters属性集中到一个文件中时就比较难维护，这时Modules就给我带来便利了，Vuex 允许我们将 store 分割到不同的模块（module）中，每个模块拥有独立的State、Mutations、Actions和Getters属性，这样我们只要在对应的模块中创建对应的store.js，然后通过Modules注册到store中即可，这样方便管理和维护。