一、什么是状态管理? 状态管理就是,把组件之间需要共享的状态抽取出来,遵循特定的约定,统一来管理,让状态的变化可以预测。
二、为什么需要状态管理? 状态共享,组件之间通常会有一些共享的状态,在 Vue 或者React中我们一般会将这部分状态提升至公共父组件的props中,由父组件来统一管理共享的状态,状态的改变也是由父组件执行并向下传递。
这样会导致两个问题:
- 需要将共享的状态提升至公共的父组件,若无公共的父组件,往往需要自行构造
- 状态由父组件自上而下逐层传递,若组件层级过多,数据传递会变得很冗杂,变化跟踪在应用调试过程中,可能会有跟踪状态变化过程的需求,方便对某些应用场景的复现和回溯。这时候就需要统一对状态进行管理,并遵循特定的约定去变更状态,从而让状态的变化可预测。
三、单项数据流因为在真实项目开发过程中,Store状态管理器中的数据会在很多组件中用到,如果不设定一个统一的规范去管理数据,最终将会导致数据混乱、使得项目变得难以维护。
所以vuex状态管理器设计了如下几个核心api,与视图之间进行交互配合:
- state vuex提供的,用以集中存储共享的数据。
- mutations vuex提供的,专门用以触发state数据变化的方法集,并且要求mutations的方法执行结果必须时可预测的,在其内部不能出现异步请求等不可预测的逻辑。
- actions vuex提供的,专门用于让vuex进行异步请求处理的方法集,可选择使用。
- view 视图层,整个项目组件的代称,我们在此处消费状态管理器提供的数据、方法。 数据走向必须遵循单向数据流的规范:
1. 当我们初始化使用状态机数据时的流程是store---->state----> view
2. 当组件内部想要本地更新状态管理器的数据,其流程是
view触发---->mutations---->state---->store---->view更新
3. 当组件内部想要在异步请求后,再更新本地状态管理器的数据,其流程是
view触发---->actions---->mutations---->state---->store---->view更新