Vuex2.0文档以及源码阅读

Vuex2.0是Vue应用中的状态管理工具，通过其官方文档的阅读，我们可以知道Vuex采用集中式的状态管理完成应用的组件间状态共享以及通信。下文将从几个问题出发，具体解释关于Vuex2.0在中大型Vue应用实践中的那些事。

一、什么是Vuex

Vuex是Vue周边生态库的一个关于状态管理的工具，其目的是集中式的管理组件的状态。Vuex的开发思想借鉴了Flux、Redux以及The Elem Architecture。在Vue应用中使用Vuex可以方便的完成组件之间的状态共享，避免了使用事件的方式完成父子组件以及兄弟组件之间的通信。

二、为什么需要Vuex

Vue应用中的组件都维护了组件的私有状态，例如组件实例中的data选项。并非所有的应用的都需要使用Vuex，例如在以下两种情况下，完全可以不使用Vuex：

• 应用中不需要组件之间的状态共享（这种情况出现的概率很小）
• 应用中组件之间需要状态共享，但是业务场景比较简单，这种情况可以使用事件的方式完成组件之间的状态共享。

因此可以发现之所以需要Vuex，主要是因为应用的业务场景比较复杂，需要组件之间的状态共享。这种情况下Vuex的使用可以大大的降低业务的复杂度，通过Vuex集中管理全局状态，从而达到多组件之间共享状态的目的。

三、如何使用Vuex

如何使用Vuex，在Vuex的官方文档中已经给出了详细的使用示例。在大型Vue应用中大都采用单文件组件开发的方式，通过配合vue-loader以及webpack实现Vue的单页应用的开发。这种情况下的Vuex使用包括以下几个步骤：

1. 通过npm安装vuex

   npm install vuex --save

2. 全局引入vuex并安装。（通过vue-cli生成的项目一般都在main.js中引入）

   import vuex from 'vuex';
   Vue.use(Vuex);

3. 实例化Vuex，并导出

   export const store = new Vuex.Store({
       state,
       mutation,
       actions,
       getters
   });

4. 引入创建的store，并在vue根实例上注册

   import store from './store/store.js'
   new Vue({
       router,
       store // 此处注册Vuex的store实例
   }).$mount(app);

四、Vuex使用中的若干问题

阅读部分github上的Vue应用时，可以发现对于Vuex的使用有很多种方式。通读Vuex的官方文档才发现，Vuex的核心本质在于通过在View层面通过store.commit()的方式去触发mutation去改变全局状态。但是在使用过程中又出现了actions，getters，mutations-type等概念，什么情况下适用，什么情况下可以不用等这些问题下文将给出具体解释。

为什么需要actions

Vuex中规定了store中的state只能通过触发mutation来改变。在严格模式下直接修改store的state会报错。之所以采用这种方式文档也给出了解释，这样做的好处在于可以对state的每次改变做到有迹可循。

Vuex中的mutation规定了只能采用同步的方式。之所以不能存在异步的方式在于异步的方式破坏了mutation的设计原则，如果存在异步代码，则对于本次状态的改变无法做到有效的记录。在这种情况下引入了actions的概念，通过将异步操作放在action中，通过dispatch一个action去触发mutation。这种方式mutation中都是同步的操作，有效的保证了每次对于state的改变都可以跟踪记录。因此actions的引入是为了处理异步操作带来的问题。

应注意在vuex中，mutations中都是同步的操作，所有的异步操作都放在actions中。

为什么需要getters

Vuex中对于全局state的获取提供了计算属性的方式，在私有组件中的computed属性中通过this.$store.store.*** 可以方便的获取全局的状态，当全局状态发生变化时，私有组件中关联的计算属性会同步得到更新。

存在这样一种业务场景，即私有组件并不是想直接获得全局状态，而是想得到对于全局状态一些处理后的结果。这种情况下在私有组件的计算属性中通过一些操作也可以做到。当多个私有组件都需要相同的结果时，为了避免在多个组件的computed属性中写重复的代码，提出了getter的概念。通过全局设置一些getter，多个私有组件可以共享getter对于部分state处理后的结果。

getter存在的意义在于设置一些全局的对于state的处理结果，以便多个组件之间共享，如果仅仅是直接获取全局的state，则getter的存在没有意义，可以不用。

mutations-type存在的意义

使用常量替代mutation事件类型的方式是Flux实现中常见的模式，通过将代表mutation事件类型的常量放置在一个文件中，可以使得多人维护的项目中开发者对于项目中的mutation一目了然。

小结

以上总结了Vuex在大型Vue应用中的相关问题。通过再次阅读Vuex文档，自己对于相关问题的认识更加深刻。Vuex2.0的源码不是很多，阅读尤大的源码对于自己编码的提升也有很大的提升。来自滴滴前端团队的黄轶老师的文章《Vuex2.0源码分析》给出了非常详细的解释，受益匪浅。