当前位置: 欣欣网 > 码农

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

2024-07-04码农

已帮助数百位同学拿到了中大厂 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 时增加新的选项

  • 为 store 增加新的方法

  • 包装现有的方法

  • 改变甚至取消 action

  • 实现副作用,如本地存储

  • 仅应用插件于特定 store

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


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


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


    结语

    我是林三心,感谢您的阅读~

    1v1私教、找工作、全程陪跑、终身服务

    可直接加 Sunday老师 微信沟通,回复【资料】可直接领取 Sunday独家整理 大厂面试题、大厂真实面经