Vue方向：Vuex状态管理

1、理解Vuex

     Vuex是一个专门为Vue.js应用程序开发的状态管理模式，通俗的来说Vuex就是vue的一个插件，作用就是帮助管理vue的状态。

2、状态管理的理解

      所谓的状态就是vue组件中data里面的属性，也称为数据，所谓的状态管理对于项目中数据的操作管理，Vuex是为vue应用管理状态，Vuex采用的是集中式管理，就是将所有的数据集中在一起管理，Vuex也继承Vue官方调试工具提供调试。

3、状态管理模式

      简而言之：状态管理模式就是数据操作的固定方式

3.1  最基本的状态管理模式

      data选项中的属性就是我们的状态state,模板中使用{{ }}去渲染数据就是我们的视图view,methods选项中定义的修改数据的方法就是动作actions.

代码

每次执行动作actions(点击事件),都会改变状态state(data数据)，同时视图view({{count}})也会发生视图的更新。

3.2 状态管理的部分

      state：状态，驱动应用的数据源，也是数据存放的地方

      view：使用声明的方式将state映射到视图中

     actions：响应在view上用户输入导致的状态变化

图示

3.3  多组件共享状态的问题

       前面展示的是最基本的单项数据流的状态管理模式，但如果在应用中遇到多个组件共享状态时，单项数据流就可能被破坏，比如如下几个问题：

        1.  多个视图依赖于同一状态

               针对这个问题，以前可以采用组件嵌套传递状态，但是对于非父子组件传递状态就会变得非常繁琐。

       2.  不同得视图修改同一状态

              以前采用自定义事件传递数据的更改，在应用复杂度提升时，逻辑也将会变得更加复杂。

Vuex是将不同组件的共享状态抽离出来，以全局单例模式进行管理，这样不管在哪个组件中都可以获取状态或触发修改状态的行为。

4、Vuex状态管理图

4.1  Vuex状态管理的优点

       Vuex通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，这样使得代码将会变得更加的结构化且易维护。

4.2  Vue状态管理流程图

图示

4.3  Vuex流程图理解

1. State：状态，存放数据的地方，Vuex所维护管理的状态都定义在state中

2. Mutations：存放修改数据的方法，虽然可以直接修改状态State，但是并不推荐，因为直接修改的话devtool检测不到数据的变化，不利于代码的调试。

3. Actions：存储异步操作方法，如果异步的修改State状态，可以将异步的方法定义在Actions中，虽然在Mutations中可以异步修改State状态，但是不推荐，Actions并不直接修改状态State，而是在Actions中触发修改数据的Mutations。

5、Mutations与Actions的不同

        Mutations中定义同步函数，而Actions中定义异步函数

       原因：当我们使用调试工具进行调试时，devTool可以捕获Mutation的快照，检测状态的变化，但是如果是异步操作，那么devTool将不能很好的跟踪这个操作什么时候完成，所以，Vuex要求Mutation中的方法必须是同步方法，Actions定义处理异步修改状态方法

6、 Getter

         Getter 可以当做是Vuex中的计算属性，有些状态修改调整后在使用,比如对于商品的过滤，如果每次都需要获取到数据以后在过滤显示就不是特别友好，因此我们可以通过Getter对于数据进行过滤并缓存起来,每次使用过滤后的缓存数据

7、Module

        Module是模块的意思,在Vuex中使用模块的说明，Vue使用单一状态树,也就意味着会有很多状态交给Vuex来管理，当应用变得非常复杂时,store对象就有可能变得相当臃肿，为了解决这个问题,Vuex允许我们将store分割成模块(Module),而每个模块拥有自己的state,mutation action, getters