Vue3 中有些场景，真不想用 Pinia ！

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~Qpz28资讯网——每日最新资讯28at.com

背景

图片Qpz28资讯网——每日最新资讯28at.com

Pinia 现阶段是 Vue3 最火的一个状态管理库了，很多人用 Pinia 来：Qpz28资讯网——每日最新资讯28at.com

• 缓存一些请求回来的数据
• 管理一些可以全局共用的数据

其实最重要的一点就是：缓存一些请求回来的数据Qpz28资讯网——每日最新资讯28at.com

毕竟，前端只是静态页面，你得需要去请求数据，才能让你的页面动态去展示你想展示的东西Qpz28资讯网——每日最新资讯28at.com

就比如我想要通过请求去获取登录用户的用户信息，并展示在页面，那么在 Pinia 中我会这么写Qpz28资讯网——每日最新资讯28at.com

图片Qpz28资讯网——每日最新资讯28at.com

并且在页面中去调用对应的请求方法，获取数据，并且如果需要在请求过程中加一个过渡的 loading 阶段的话，那么还需要再页面中去维护几个 loading 变量，以达到我们想要的目的Qpz28资讯网——每日最新资讯28at.com

图片Qpz28资讯网——每日最新资讯28at.com

其实这是非常麻烦的一件事，那如果有十个页面，岂不是就得维护几十个 loading 变量？这其实是很多开发者非常苦恼的事情Qpz28资讯网——每日最新资讯28at.com

vue-query

其实不一定所有场景都用到 Pinia，其实我们想要的目的很简单：数据缓存 + loadingQpz28资讯网——每日最新资讯28at.com

那么有什么办法能让我们缓存请求的数据，又能不用我们自己维护 loading 变量呢？Qpz28资讯网——每日最新资讯28at.com

或许我们可以试试 vue-query 这个库Qpz28资讯网——每日最新资讯28at.com

pnpm i vue-query

在 main.ts 中去注册全局Qpz28资讯网——每日最新资讯28at.com

图片Qpz28资讯网——每日最新资讯28at.com

接着在页面中使用，可以看到，我故意在页面中去写两次请求Qpz28资讯网——每日最新资讯28at.com

图片Qpz28资讯网——每日最新资讯28at.com

但是他会有缓存效果，实际只发了一次请求，那是因为 useQuery 第一个参数是传一个 key ，这个 key 会标识请求的唯一性，你想要请求两次的话，可以把 key 设置成不一样的即可~Qpz28资讯网——每日最新资讯28at.com

图片Qpz28资讯网——每日最新资讯28at.com

总结

先来看看官方文档中怎么说：https://tanstack.com/query/v4/docs/framework/vue/guides/does-this-replace-client-stateQpz28资讯网——每日最新资讯28at.com

vue-query 只适用于存储从服务端获取的数据，如果有另外的数据需要存储还是要用到 pinia，但是这种数据是比较少的，这样也可以使得 pinia 中的代码量减少很多并简洁。当然这里介绍的 vue-query 的 api 是最简单的，你能想到的功能它基本都有，感兴趣的可以查看文档。Qpz28资讯网——每日最新资讯28at.com

趋势

在 react 中使用 swr、react-query 是大势所趋，可以从 npm 下载量来看出来。相信今后在 vue 中 vue-query 也会有越来越多的使用，因为另外三大框架都是跟随 react 走的 hooks 的思想。Qpz28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-80841-0.htmlVue3 中有些场景，真不想用 Pinia ！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： .NET中异步操作的选择：Task vs. ValueTask的区别与性能优化

下一篇： 小小ArrayList，居然这么多坑？！