vue2[初级] vuex状态集中式管理

Vuex 状态集中式管理

• Vuex 可以理解成类似Spring的IOC 可以接管各种Bean 然后可以 以注解的形式提供给调用者，这里Vuex可以接管各种属性 例如computed计算属性，methods方法等 然后通过$store这个模块对象提供给调用者， 不同的是 没有IOC那么强大
• 本节源码在文章末尾
  – Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
  – 官方用户指南 Vuex
  简单理解 就是在复杂应用中，Vuex 对vue应用中多个组件的共享状态进行集中式的管理

什么是“状态管理模式”？

– 下图是一个简单的计数器应用
– 分为3个部分

• 状态，驱动应用的数据源；
• 视图，以声明方式将状态映射到视图；
• 操作(应用)，响应在视图上的用户输入导致的状态变化。
  
• 通过上述图例可以将其理解为一个单向的数据流 即
  
• 但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏
  – 例如 多个视图依赖于同一状态，又或是来自不同视图的行为需要变更同一状态
  – 对于多个视图依赖与同一个状态 传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
  – 对于来自不同视图的行为需要变更成同一个状态 我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，以上的这些模式非常脆弱，通常会导致无法维护的代码
  – 综上所述我们知道如果想要维护多个视图之间的同一状态需要将状态这块抽离出来 做成一个结构化且易于维护的组件 在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为，通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护 这也是VUEX的由来
  – 如图所示
  

什么情况下我应该使用 Vuex

– Vuex 可以帮助我们管理共享状态，并附