Vuex
Vuex 是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组建的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travvel调试，状态快照导入导出等高级调试功能。
什么是状态管理
这个状态资管理应用包含以下几个部分：
- state: 驱动应用的数据源。
- view: 以声明方式将state映射到视图。
- actions：响应在view上的用户输入导致的状态变化。 即：单向数据流
当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
- 多个视图依赖于同一状态。
- 传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
- 来自不同视图的行为需要变更同一状态。
- 我们经常会采用父子组件直接引用或通过事件来变更和同步状态的多份拷贝。但是这些模式非常脆弱，通常会导致无法维护的代码。 我们可以把组件的共享状态抽取出来，以一个全局单例模式管理，在这种模式下，组件数构成一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态活触发行为。 通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，代码将变得更结构化且易维护。Vuex是专门为Vue.js设计的状态管理库，以利用Vue.js的细粒度数据相应机制来进行高效的状态更新。
什么情况下使用Vuex
Vuex可以助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果不开发大型单页应用，使用Vuex可能更繁琐冗余的。如果需要构建一个大型单页应用，可能会考虑更好的在组件外部管理状态，使用Vuex。
Vuex.Store构造器选型
| 选项 | 描述 | 类型 |
|---|---|---|
| state | Vuex store实例的根state对象。如果传入返回一个对象的函数，其返回的对象会被用作根state。这在你想要重用state对象，尤其是对于中油module来说非常有用。 | Object/Function |
| mutations | 在store上注册mutations，处理函数总是接受state作为第一个参数（如果定义在模块中，则为模块的局部状态），payload作为第二个参数（可选） | {[type:string]: Function} |
| actions | 在store上注册action。处理函数总是接受context作为第一个参数，payload作为第二个参数（可选） | {[type:string]: Function} |
| getters | 在store上注册getter，getter方法接受以下参数 | {[key:string]: Function} |
| modules | 包含子模块的对象，会被合并到store,与跟模块的选项一样，每个模块也包含state和mutations选项，模块的状态使用key关联到store的根状态，模块的mutation和getter只会接收module的局部状态作为第一个参数，而不是根状态，并且模块action的context.state 同样指向局部状态 | object |
| plugins | 一个数组，包含应用在store上的插件方法，这些插件直接接收store作为唯一参数，可以监听mutation（用于外部的数据持久化，记录或调试）或者提交mutation(用于内部数据，例如：websocket或某些观察者) | Array(Function) |
| strict | 使Vuex.store进入严格模式，在严格模式下，任何mutation处理函数以外修改Vuex state都会抛出错误 | boolean / false |
| devtools | 为某个特定的Vuex实例打开或关闭devtools。对于传入false的实例来说Vuex store不会订阅到devtools插件，可用于一个页面中有多个store的情况。 | boolean / false |
Vuex.Store实例属性
| 属性 | 描述 | 类型 |
|---|---|---|
| state | 跟状态，只读 | Object |
| getters | 暴露出注册的getter，只读 | Object |
Vuex.Store实例方法
| 方法 | 描述 | 示例 |
|---|---|---|
| commit | 提交mutation。options里可以有root: true,它允许在命名空间模块里提交根的mutation | commit(type: string, payload?: any, options?: Object) commit(mutation: Object, options?: Object) |
| dispatch | 分发action。options里可以有root:true，它允许在命名空间模块里分发根的action.返回一个解析所有被触发的action处理器的Promise | dispatch(type: string, payload?: any, options?: Object): Promise<any> dispatch(action: Object, options?: Object): Promise<any> |
| replaceState | 替换store的根状态，仅用状态合并或时光旅行调试。 | replaceState（state: Object） |
| watch | 响应式的监听Fn的返回值，当值改变时调用回调函数，fn接收store的state作为第一个参数，其getter作为第二个参数，最后接收一个可选的对象参数表示Vue的vm.$watch方法的参数。要停止监听，调用此方法返回的函数即可停止监听 | replaceState（state: Object） |
| subScribe | 订阅store的mutation。handler会在每个mutation完成后调用，接收mutation和经过mutation后的状态作为参数 | subscribe(handler: Function, options?: Object): Function |
| subscribeAction | 订阅 store 的 action。handler 会在每个 action 分发的时候调用并接收 action 描述和当前的 store 的 state 这两个参数 | subscribeAction(handler: Function, options?: Object): Function |
| registerModule | 注册一个动态模块（options 可以包含 preserveState: true 以允许保留之前的 state。用于服务端渲染。） | registerModule(path: string / Array<string>, module: Module, options?: Object) |
| unregisterModule | 卸载一个动态模块 | unregisterModule(path: string / Array<string>) |
| hasModule | 检查该模块的名字是否已经注册 | hasModule(path: string / Array<string>): boolean |
| hotUpdate | 热替换新的action和mutation | hotUpdate(newOptions: Object) |
组件绑定的辅助函数
| 辅助函数 | 描述 | 类型 | ||
|---|---|---|---|---|
| mapState | 为部组件创建计算属性以返回Vuex store中的状态。第一个参数是可选的，可以是一个命名空间的字符串。对象形式的第二个参数的成员可以是一个函数 | mapState(namespace?: string, map: Array / Object<string / function>): Object | ||
| mapGetters | 为组件创建计算属性以返回getter的返回值，第一个参数可选，可以是一个命名空间字符串 | mapGetters(namespace?: string, map: Array / Object): Object | ||
| mapActions | 创建组件方法分发action。第一个参数是可选的，可以是一个命名空间字符串。对象形式的第二个参数的成员可以是一个函数。function(dispatch: function, ...args: any[]) | mapActions(namespace?: string, map: Array/ Object<string / function>): Object | ||
| mapMutations | 创建组件方法体检mutation，第一个参数是可选的，可以是一个命名空间字符串，对象形式的第二个参数的成员可以是一个函数。function(commit: function, ...args: any[]) | mapMutations(namespace?: string, map: Array | Object<string | function>): Object |
| createNamespacedHelpers | 创建基于命名空间的组件绑定辅助函数。其返回一个包含 mapState、mapGetters、mapActions 和 mapMutations 的对象。它们都已经绑定在了给定的命名空间上 | createNamespacedHelpers(namespace: string): Object |
