首页   

小型 Vue 项目，该不该用 Pinia 、Vuex呢？

奇舞精选  · 前端  · 昨天

主要观点总结

文章主要探讨了Vue3项目中是否必须使用Pinia、Vuex等状态管理工具进行状态管理，同时介绍了Ref、Reactive等API也可以实现状态管理，并强调了Pinia、Vuex等工具在逻辑紧凑性和可维护性方面的优点。此外，文章还提到了Vue3中effectScope这个冷门但强大的API，可以用于实现局部状态管理和多组件共享状态。

关键观点总结

关键观点1: 对Pinia、Vuex等状态管理工具的质疑

文章引发了对是否必须使用Pinia、Vuex等工具的疑问，并探讨了这些工具的优点的必要性。

关键观点2: Ref、Reactive API的状态管理可能性

文章指出Ref、Reactive API也可以实现状态管理，并阐述了其实现方式。

关键观点3: Pinia、Vuex等状态管理工具的优点

文章强调了Pinia、Vuex等工具在逻辑紧凑性和可维护性方面的优点。

关键观点4: EffectScope API的介绍与应用

文章介绍了Vue3中effectScope这个强大的API，并阐述了其用于局部状态管理和多组件共享状态的用法。

关键观点5: 奇舞团的介绍与招募

文章最后介绍了奇舞团并进行了招募宣传。


正文


前言

说到 Vue3 的状态管理，我们会第一时间想到 Pinia、Vuex，但是经过很长一段时间的 Vue3 项目开发，我逐渐发现，我们真的有必要用 Pinia、Vuex 这类的状态管理工具吗？

带着这样的疑惑，我首先是想知道一下 Pinia、Vuex 的优点到底是什么，企图说服自己去使用它们来做状态管理~

优点？非他不可？

看看上面所说的优点，其实我们仔细想一下，这些优点貌似也不是那么的非他不可吧？

  • 集中式状态管理： 其实 Ref、Reactive 也可以做到，只需要写在某个 .js/.ts 文件里即可
  • 模块化： 其实 Ref、Reactive 也可以做到，不同模块的状态写到不同的 .js/.ts 文件里即可
  • 类型推导： 这个是 TypeScript 层面的事情，与状态管理工具无关
  • 响应式和懒加载： Ref、Reactive 也可以做到，本身就是响应式，并且引用到 .js/.ts 才会去初始化
  • 持久化和插件扩展： 实现起来不难，并不是什么技术难点

综上所述，貌似在 Vue3 项目中可以使用 Ref、Reactive 去做状态管理就行了？

其实还是优点的

其实 Pinia、Vuex 这类状态管理工具还是有一个很大的优点的，那就是逻辑更加紧凑，可维护性 更高，不过我知道我这个看法是比较主观的看法

我还是推荐一些比较小的项目，可以使用 Ref、Reactive 去进行状态管理，但是如果是大型项目的话，确实还是需要 Pinia、Vuex 这类状态管理工具

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 也能达到组件之间共享状态~



- END -

如果您关注前端+AI 相关领域可以扫码进群交流


 


添加小编微信进群😊


关于奇舞团

奇舞团是 360 集团最大的大前端团队，非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。





推荐文章
两款知名国产前端开源项目被“投毒”  ·  前端大全  ·  昨天
© 2024 精读
删除内容请联系邮箱 2879853325@qq.com