Vuex状态管理模式

根据官网，vuex是一个专为vue.js应用程序开发的状态管理模式。

Vuex状态管理模式有5种，分别为：State、 Getter、Mutations 、Action、 Module。

只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车。

State： 该属性用来存储数据和存储状态。它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变，才会被被重新计算。

Getter：该属性类似于vue.js的计算属性。可以对State进行计算操作，虽然组件内也可以进行计算操作，但是Getter可以在多组件之间复用，而且Getter的返回值会根据它的依赖被缓存起来，只有Getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。

Mutations：该属性用来更改state 的状态。每个mutation都有一个字符串类型的事件类型和一个回调函数，在函数中改变state的值。执行这个函数，需要执行一个相应的调用方法：store.commit。

Action ： 该属性用来提交mutations，在action中可以执行store.commit，action没有异步操作。在页面中使用这个action，可以执行store.dispatch。

Module ： 该属性可以将store分割程不同的模块。每个模块有自己的state，mutations，action，getters。使结构变得更加清晰，方便管理。

const store = new Vuex.Store({ //store实例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

用Vuex的好处：

1、可以做状态管理，数据更新可以驱动视图更新；

2、可以当成一个内存数据库用，像H5 的Cookie，localStaorage之类的。但是Vuex在刷新后会自己销毁，而H5的那些本地存储则还会在浏览器中。

不用Vuex不好的地方：

1、可维护性降低；

2、可读性下降；

3、增加耦合，大量的上传派发，会让耦合性大大的增加。