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

Sunshine_Lin
1,581 阅读2分钟

前言

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

真的需要 Pinia 吗？

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

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

答案是：可以！！！

ref、reactive

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

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

image.png

image-1.png

image-2.png

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

state-1-1.gif

effectScope

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

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

image-4.png

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

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

image-6.png

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

image-7.png

image-8.png

image-9.png

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

state-2.gif

那还需要 Pinia 吗？

结构分明

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

比如下面这个例子

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

结构很分明

image-10.png

监听 state

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

image-11.png

插件机制

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

  • 为 store 添加新的属性
  • 定义 store 时增加新的选项
  • 为 store 增加新的方法
  • 包装现有的方法
  • 改变甚至取消 action
  • 实现副作用，如本地存储
  • 仅应用插件于特定 store

比如举个小例子，给所有状态管理都加一个属性变量

image-12.png

Pinia 著名的持久化插件pinia-plugin-persistedstate就是利用了 Pinia 的插件机制

image-13.png

他的核心代码其实很少，就是利用插件机制，使用$subscribe去监听每一个状态管理的变化，然后进行持久化存储~

image-14.png

结语 & 加学习群 & 摸鱼群

我是林三心

  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
  • 一个偏前端的全干工程师；
  • 一个不正经的掘金作者；
  • 一个逗比的B站up主；
  • 一个不帅的小红书博主；
  • 一个喜欢打铁的篮球菜鸟；
  • 一个喜欢历史的乏味少年；
  • 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有10000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

avatar
文章
阅读
粉丝