Pinia进阶:优雅的setup(函数式)写法+封装

简介: 相信在座各位假如使用Vue生态开发项目情况下,对Pinia状态管理库应该有所听闻或正在使用,假如还没接触到Pinia,这篇文章可以帮你快速入门,并如何在企业项目中更优雅封装使用。

本文先给大家阐述如何去理解、使用Pinia,最后讲怎样把Pinia集成到工程中,适合大多数读者,至于研读Pinia的源码等进阶科普,会另外开一篇文章细述。另外,本文的所有demo,都专门开了个GitHub项目来保存,有需要的同学可以拿下来实操一下。🌹🌹

认识Pinia

Pinia读音:/piːnjʌ/,是Vue官方团队推荐代替Vuex的一款轻量级状态管理库。 它最初的设计理念是让Vue Store拥有一款Composition API方式的状态管理库,并同时能支持 Vue2.x版本的Option API 和 Vue3版本的setup Composition API开发模式,并完整兼容Typescript写法(这也是优于Vuex的重要因素之一),适用于所有的vue项目。

比起Vuex,Pinia具备以下优点:

完整的 TypeScript 支持:与在 Vuex 中添加 TypeScript 相比,添加 TypeScript 更容易
极其轻巧(体积约 1KB)
store 的 action 被调度为常规的函数调用,而不是使用 dispatch 方法或 MapAction 辅助函数,这在 Vuex 中很常见
支持多个Store
支持 Vue devtools、SSR 和 webpack 代码拆分

Pinia与Vuex代码分割机制

上述的Pinia轻量有一部分体现在它的代码分割机制中。
举个例子:某项目有3个store「user、job、pay」,另外有2个路由页面「首页、个人中心页」,首页用到job store,个人中心页用到了user store,分别用Pinia和Vuex对其状态管理。
image.png

先看Vuex的代码分割: 打包时,vuex会把3个store合并打包,当首页用到Vuex时,这个包会引入到首页一起打包,最后输出1个js chunk。这样的问题是,其实首页只需要其中1个store,但其他2个无关的store也被打包进来,造成资源浪费。
image.png
Pinia的代码分割: 打包时,Pinia会检查引用依赖,当首页用到job store,打包只会把用到的store和页面合并输出1个js chunk,其他2个store不耦合在其中。Pinia能做到这点,是因为它的设计就是store分离的,解决了项目的耦合问题。

目录
打赏
540
57
57
0
170
分享
相关文章
Opencv学习笔记(一):如何将得到的图片保存在指定目录以及如何将文件夹里所有图片以数组形式输出
这篇博客介绍了如何使用OpenCV库在Python中将图片保存到指定目录,以及如何将文件夹中的所有图片读取并以数组形式输出。
644 0
Opencv学习笔记(一):如何将得到的图片保存在指定目录以及如何将文件夹里所有图片以数组形式输出
文献丨多组学大数据构建小麦穗发育转录调控网络,TRN+GWAS挖掘关键转录调控(二)
文献丨多组学大数据构建小麦穗发育转录调控网络,TRN+GWAS挖掘关键转录调控(二)
ES6 代码转成 ES5 代码的实现思路是什么
ES6 代码转成 ES5 代码的实现思路主要是通过编译器将新的语法结构和特性转换为旧版本的 JavaScript 代码,以确保在不支持 ES6 的环境中可以正常运行。常用的工具如 Babel 可以自动完成这一过程。
太爽了!这10个 Vite 插件,帮我在开发中节省了大量时间!!
太爽了!这10个 Vite 插件,帮我在开发中节省了大量时间!!
好用的import: Vite的Glob 导入
好用的import: Vite的Glob 导入
1237 0
Flutter 实现扫码
Flutter 实现扫码
开箱即用的axios封装:Vue3+TS(建议收藏)
Axios多用于处理前端项目的Ajax请求,这里要注意区分Axios和Ajax:Ajax是一种技术统称,Axios是第三方库。在使用的时候,我们可以直接使用Axios来发起请求,也可以封装后采用统一的接口发送请求。在前端项目中,应该大多数人都会选择封装一下Axios,不仅可以节省代码,看起来更简洁;而且可以统一管理请求和响应。本文就以Vue3+Typescript,封装一个”开箱即用“的Axios。
11516 6
开箱即用的axios封装:Vue3+TS(建议收藏)
|
12月前
|
ERP系统中的生产计划与调度
【7月更文挑战第25天】 ERP系统中的生产计划与调度
506 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问