大家好，我是林三心，用最通俗易懂的話講最難的知識點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~3oX28資訊網(wǎng)——每日最新資訊28at.com

背景

圖片3oX28資訊網(wǎng)——每日最新資訊28at.com

Pinia 現(xiàn)階段是 Vue3 最火的一個狀態(tài)管理庫了，很多人用 Pinia 來：3oX28資訊網(wǎng)——每日最新資訊28at.com

• 緩存一些請求回來的數(shù)據(jù)
• 管理一些可以全局共用的數(shù)據(jù)

其實(shí)最重要的一點(diǎn)就是：緩存一些請求回來的數(shù)據(jù)3oX28資訊網(wǎng)——每日最新資訊28at.com

畢竟，前端只是靜態(tài)頁面，你得需要去請求數(shù)據(jù)，才能讓你的頁面動態(tài)去展示你想展示的東西3oX28資訊網(wǎng)——每日最新資訊28at.com

就比如我想要通過請求去獲取登錄用戶的用戶信息，并展示在頁面，那么在 Pinia 中我會這么寫3oX28資訊網(wǎng)——每日最新資訊28at.com

圖片3oX28資訊網(wǎng)——每日最新資訊28at.com

并且在頁面中去調(diào)用對應(yīng)的請求方法，獲取數(shù)據(jù)，并且如果需要在請求過程中加一個過渡的 loading 階段的話，那么還需要再頁面中去維護(hù)幾個 loading 變量，以達(dá)到我們想要的目的3oX28資訊網(wǎng)——每日最新資訊28at.com

圖片3oX28資訊網(wǎng)——每日最新資訊28at.com

其實(shí)這是非常麻煩的一件事，那如果有十個頁面，豈不是就得維護(hù)幾十個 loading 變量？這其實(shí)是很多開發(fā)者非常苦惱的事情3oX28資訊網(wǎng)——每日最新資訊28at.com

vue-query

其實(shí)不一定所有場景都用到 Pinia，其實(shí)我們想要的目的很簡單：數(shù)據(jù)緩存 + loading3oX28資訊網(wǎng)——每日最新資訊28at.com

那么有什么辦法能讓我們緩存請求的數(shù)據(jù)，又能不用我們自己維護(hù) loading 變量呢？3oX28資訊網(wǎng)——每日最新資訊28at.com

或許我們可以試試 vue-query 這個庫3oX28資訊網(wǎng)——每日最新資訊28at.com

pnpm i vue-query

在 main.ts 中去注冊全局3oX28資訊網(wǎng)——每日最新資訊28at.com

圖片3oX28資訊網(wǎng)——每日最新資訊28at.com

接著在頁面中使用，可以看到，我故意在頁面中去寫兩次請求3oX28資訊網(wǎng)——每日最新資訊28at.com

圖片3oX28資訊網(wǎng)——每日最新資訊28at.com

但是他會有緩存效果，實(shí)際只發(fā)了一次請求，那是因?yàn)?useQuery 第一個參數(shù)是傳一個 key ，這個 key 會標(biāo)識請求的唯一性，你想要請求兩次的話，可以把 key 設(shè)置成不一樣的即可~3oX28資訊網(wǎng)——每日最新資訊28at.com

圖片3oX28資訊網(wǎng)——每日最新資訊28at.com

總結(jié)

先來看看官方文檔中怎么說：https://tanstack.com/query/v4/docs/framework/vue/guides/does-this-replace-client-state3oX28資訊網(wǎng)——每日最新資訊28at.com

vue-query 只適用于存儲從服務(wù)端獲取的數(shù)據(jù)，如果有另外的數(shù)據(jù)需要存儲還是要用到 pinia，但是這種數(shù)據(jù)是比較少的，這樣也可以使得 pinia 中的代碼量減少很多并簡潔。當(dāng)然這里介紹的 vue-query 的 api 是最簡單的，你能想到的功能它基本都有，感興趣的可以查看文檔。3oX28資訊網(wǎng)——每日最新資訊28at.com

趨勢

在 react 中使用 swr、react-query 是大勢所趨，可以從 npm 下載量來看出來。相信今后在 vue 中 vue-query 也會有越來越多的使用，因?yàn)榱硗馊罂蚣芏际歉S react 走的 hooks 的思想。3oX28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://m.www897cc.com/showinfo-26-80841-0.htmlVue3 中有些場景，真不想用 Pinia ！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： .NET中異步操作的選擇：Task vs. ValueTask的區(qū)別與性能優(yōu)化

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