大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎(chǔ)是進階的前提是我的初心~

背景

圖片

Pinia 現(xiàn)階段是 Vue3 最火的一個狀態(tài)管理庫了，很多人用 Pinia 來：

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

其實最重要的一點就是：緩存一些請求回來的數(shù)據(jù)

畢竟，前端只是靜態(tài)頁面，你得需要去請求數(shù)據(jù)，才能讓你的頁面動態(tài)去展示你想展示的東西

就比如我想要通過請求去獲取登錄用戶的用戶信息，并展示在頁面，那么在 Pinia 中我會這么寫

圖片

并且在頁面中去調(diào)用對應(yīng)的請求方法，獲取數(shù)據(jù)，并且如果需要在請求過程中加一個過渡的 loading 階段的話，那么還需要再頁面中去維護幾個 loading 變量，以達(dá)到我們想要的目的

圖片

其實這是非常麻煩的一件事，那如果有十個頁面，豈不是就得維護幾十個 loading 變量？這其實是很多開發(fā)者非?？鄲赖氖虑?/p>

vue-query

其實不一定所有場景都用到 Pinia，其實我們想要的目的很簡單：數(shù)據(jù)緩存 + loading

那么有什么辦法能讓我們緩存請求的數(shù)據(jù)，又能不用我們自己維護 loading 變量呢？

或許我們可以試試 vue-query 這個庫

pnpm i vue-query

在 main.ts 中去注冊全局

圖片

接著在頁面中使用，可以看到，我故意在頁面中去寫兩次請求

圖片

但是他會有緩存效果，實際只發(fā)了一次請求，那是因為 useQuery 第一個參數(shù)是傳一個 key ，這個 key 會標(biāo)識請求的唯一性，你想要請求兩次的話，可以把 key 設(shè)置成不一樣的即可~

圖片

總結(jié)

先來看看官方文檔中怎么說：https://tanstack.com/query/v4/docs/framework/vue/guides/does-this-replace-client-state

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

趨勢

在 react 中使用 swr、react-query 是大勢所趨，可以從 npm 下載量來看出來。相信今后在 vue 中 vue-query 也會有越來越多的使用，因為另外三大框架都是跟隨 react 走的 hooks 的思想。