9. 状态管理

一、前言

通过前面组件的学习,我们大致是可以体会出这样一个事实的:正常情况下,组件中的数据属于高度封装的状态,不同组件之间想要传递数据至少也需要有上下级的包含关系。

比如props、emits、inject、provide这几个组件之间传递数据的方式,更多内容可以参看这篇文章:组件详解

虽然这样做依旧能够正常开发项目,但在某些情况下,这样传递数据是非常不方便的。

比如很多时候我们都需要有一个全局的共享数据,也就是所有组件都能使用的数据。

虽然这个需求使用provide、inject依旧能够实现,但使用起来终究很不便利、且很难管理。

比如很多时候,它都没有代码提示,即使你使用了TypeScript,这就导致一旦你修改了某个变量名,其它地方大概率你也只能自己去手动修改。

所以这个时候我们就需要出现另外一个单独的组件来实现全局变量的状态管理,也就是本文说提到的“状态管理”。

二、简单实现

状态管理其实并不复杂,和前面我们提到的逻辑复用中使用的代码复用很像,只需要将变量写在一个单独的文件中即可让其它组件引入并使用。

只不过需要注意的是,如果你希望所有组件都共享的是同一个响应式变量数据,那么就请使用reactiveref函数在全局创建变量,而不是像逻辑复用中在函数内部创建的局部变量。

只有全局变量才是所有组件共享的,而局部变量则是各个组件自己持有一份,互不影响。

正如官方提供的简单示例

image-20240123211936026

你只需要自己建一个js文件,用reactive函数创建一个全局响应式的对象,并通过export将其导出,那么其它vue组件都可以从这个文件中导入该响应式对象、并使用其上的数据,

image-20240123212616870

就像上图这样使用即可,非常简单,此时你在任意一个组件中修改这个导入的store对象上的count属性的值时,其它组件使用到该值的地方都会自动发送变化。

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux