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

背景

圖片

Pinia 現階段是 Vue3 最火的一個狀態管理庫了，很多人用 Pinia 來：

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

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

畢竟，前端只是靜態頁面，你得需要去請求數據，才能讓你的頁面動態去展示你想展示的東西

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

圖片

并且在頁面中去調用對應的請求方法，獲取數據，并且如果需要在請求過程中加一個過渡的 loading 階段的話，那么還需要再頁面中去維護幾個 loading 變量，以達到我們想要的目的

圖片

其實這是非常麻煩的一件事，那如果有十個頁面，豈不是就得維護幾十個 loading 變量？這其實是很多開發者非常苦惱的事情

vue-query

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

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

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

pnpm i vue-query

在 main.ts 中去注冊全局

圖片

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

圖片

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

圖片

總結

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

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

趨勢

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