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

背景

圖片

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

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

其實(shí)最重要的一點(diǎn)就是：緩存一些請(qǐng)求回來(lái)的數(shù)據(jù)

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

就比如我想要通過(guò)請(qǐng)求去獲取登錄用戶的用戶信息，并展示在頁(yè)面，那么在 Pinia 中我會(huì)這么寫

圖片

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

圖片

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

vue-query

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

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

或許我們可以試試 vue-query 這個(gè)庫(kù)

pnpm i vue-query

在 main.ts 中去注冊(cè)全局

圖片

接著在頁(yè)面中使用，可以看到，我故意在頁(yè)面中去寫兩次請(qǐng)求

圖片

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

圖片

總結(jié)

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

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

趨勢(shì)

在 react 中使用 swr、react-query 是大勢(shì)所趨，可以從 npm 下載量來(lái)看出來(lái)。相信今后在 vue 中 vue-query 也會(huì)有越來(lái)越多的使用，因?yàn)榱硗馊罂蚣芏际歉S react 走的 hooks 的思想。