🎗️

通用组件慎用全局状态

Tag
前端
技术
Slug
carefully-global-state-using
Created
Oct 16, 2023
在使用 VuexPina 等类 Flux 状态管理方式时,都会声明一个全局状态文件,并基于这个全局状态衍生出 dispatchaction 等概念用以分发或更新全局状态。因为全局状态的存在,无论在任何地方都可以轻松更新状态,而无需通过 props 的方式层层传递。
使用全局状态并非难事,重点在于哪些地方使用全局状态是合适的。适用性上,我认为在页面或者路由级更适合使用全局状态。特别是当页面的复杂度比较高,业务组件嵌套层级比较深入的情况下,能够很好解决状态透传的问题,并且通过状态管理库,能够比较清晰地管理状态流转。
但是有一种情况就非常不适用全局状态,那就是对于通用组件。我们在开发页面的过程中,总会存在一些页面级的组件,但是在不久的将来,很有可能这些业务组件会被其他页面使用到,而变成了通用组件。如果这时通用组件内受全局组件的状态控制,就必须对组件的状态基于 props 进行重构,如果组件和全局状态的耦合严重,这个过程就会变得比较痛苦。
所以在通俗意义上,除非是能够明确组件业务属性非常强,或者逻辑比较简单,可以直接在组件内使用全局状态。但是对于一些逻辑复杂的组件,最好就内置属于组件自己的组件状态 ,这样就无需因为未来可能发生的组件重构而担心。包括现在很多流行的状态管理库,都内置了局部状态可以使用。