专栏名称: 前端之神
一位前端小菜鸡,写过300多篇原创文章,全网有5w+个前端朋友,梦想是成为”前端之神“~
目录
相关文章推荐
杭州交通918  ·  突发!秋涛路一建筑内发生火情 ·  16 小时前  
浙江市场监管矩阵  ·  同比增长5.41%!浙江民营企业韧性向上 ·  昨天  
杭州交通918  ·  大S骨灰已运回中国台湾,生前遗言曝光 ·  3 天前  
FM93交通之声  ·  太猛!金价大涨,创历史新高! ·  3 天前  
51好读  ›  专栏  ›  前端之神

为什么有些 Vue3 项目已经开始弃用 Pinia 了?

前端之神  · 公众号  ·  · 2024-07-04 08:50

正文

前端私教训练营:1v1私教,终身辅导计划,帮你拿到满意的 offer 已帮助数百位同学拿到了中大厂 offer

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

真的需要 Pinia 吗?

最近在想一个问题:在 Vue3 项目中,进行状态管理的时候,我们真的需要 Pinia 吗?

其实我们可以反过来想一个问题:没有 Pinia ,我们能做状态管理吗?

答案是:可以!!!

ref、reactive

Vue3 的一些 API 对比 React 的好处就是,这些 API 并不一定需要在组件中去声明

就比如你想要做局部状态管理的时候,可以直接使用 reactive、ref 这类 API 来完成




这样能达到局部状态管理,多组件共用同一个状态的效果,请看下图


effectScope

Vue3 有一个超级冷门的 API 叫 effectScope ,这个 API 非常强大,但是很多人都不知道它

当然,既然很少人知道它,那自然就很少人知道,Pinia 的底层原理就是依赖了 effectScope


既然 Pinia 是通过 effectScope 来实现的,那么,我们自然也可以直接使用这个 API 来做状态管理~

其实已经有人做过这件事了,就比如 vueuse 中的


我们可以直接用这个 Hooks 来进行状态管理,如果是使用 effectScope 来进行管理的话,状态就不需要写在 Hooks 外部了, 因为 effectScope 内部逻辑只会执行一次,无论你调用多少次




利用 effectScope 也能达到组件之间共享状态~


那还需要 Pinia 吗?

结构分明

我觉得 Pinia 还是有他的好处的,好处就是: 让我们少写一些代码,并且代码更加分明

比如下面这个例子

  • state: 定义状态
  • getter: 定义计算变量
  • action: 定义修改方法

结构很分明


监听 state

Pinia 还提供了 $subscribe 来监听整个状态,我们也可以利用这个方法来做 持久化存储


插件机制

Pinia 提供了插件机制,可以让你去拓展 Pinia 的功能,以下是你可以扩展的内容:

  • 为 store 添加新的属性
  • 定义 store 时增加新的选项






请到「今天看啥」查看全文