为何要使用状态管理

咱们平时开发的大部分项目，因为复杂度不够， 不多使用 Vuex、Redux 等状态管理库，就算引入了 Vuex 这些库，也只是看成一个全局数据引用，并不是对应用状态进行管理。

但一旦页面的复杂度比较高，必然要引入状态管理，今天就聊聊我理解中的状态管理。

若是涉及到举例，因为我对Vuex更熟悉，团队内也大多比较熟悉Vue，所以会使用Vuex做例子。

到底何时应该使用状态管理

举例几个须要用 Vuex 的例子:

例子一

// Page.vue
<page>
  <component-a />
  <component-b />
</page>

// ComponentA.vue
<div>
  <component-a-child />
</div>

好比这个例子中，<component-a-child />想和<component-b />通讯，使用事件传递来解决很是麻烦。

固然也可使用 EventBus，加一个全局的 vue 实例解决，但用 EventBus 还须要去关心事件的绑定解绑，须要手动处理事件，当这类组件，就会变得很是麻烦。

最好的解决办法就是抽象出通用的组件状态，放到 state 里面，接着经过 action/mutation 改变通用状态，而须要这些状态的组件则本身调用(mapState/mapGetter)，不须要去关注组件之间的关系。

例子二

// Page.vue
<page>
<topic-list
  :list="list"
  :activity="activity"
  :user="user" />
</page>

// TopicList.vue
<div>
  <topic-header :list="list" :activity="activity" :user="user" />
  <template v-for="item in list">
    <topic :list="list" :data="item" :activity="activity" :user="user" />
  </template>
</divt

这个例子里:list="list" :activity="activity" :user="user"在被不断的传递，实际里面的组件可能只须要里面的一两个属性。

固然，例子里面的代码比较简单，也能够经过合理的组件设计来解决。

但一旦碰到这种某几个状态数据不断被其子组件以及后代组件使用的情况，能够考虑使用状态管理来解耦，可能使代码更加简洁。

状态管理解决了什么

• 最主要是解耦，把组件与组件之间的复杂关系解耦为数据与数据的关系，组件仅做单纯的数据渲染，并且因为是单一数据源，总体上很是便于维护。

之前是：

如今是：

• 因为单一数据源+数据不可变，带来了应用状态的快照，能够很方便的实现前进/后退以及历史记录管理。
• 可测试性，能够分别针对视图和数据进行测试，而不是混淆在一块儿，致使测试难度极大。

状态管理带来的新问题

最主要是因为解决使得单个组件复杂度的提高，但相比总体复杂度的下降以及更高的可维护性，这点代价是彻底值得。