某些場景下建議vue query代替pinia原理解析
前言
在 vue3 中，狀態(tài)管理都是用的 pinia 來處理和存儲從服務端獲取的數據。使用 react 的同學應該對 swr、react-query、ahooks 的 useRequest（前兩者的模仿）并不陌生，這些是專門用來處理數據請求的, 能夠幫助你處理得到的數據、loading、error，還有緩存數據的功能等等。不止有 react-query、vue-query, 還有 svelte-query 和 solid-query，這些其實都是同一個作者，是在同一個庫中，通過它的核心底層來實現各個框架的功能。query 文檔地址
使用區(qū)別
pinia
// 根文件 const pinina = createPinia(); app.use(pinia);
獲取和修改用戶信息，需要維護 user 狀態(tài), 頁面中需要維護兩個 loading 狀態(tài)。
const useStore = defineStore('main', {
state: () => ({
user: null,
}),
actions: {
async getUser() {
try {
const user = await axios.get("/api/user");
this.user = user;
} catch(err) {
//
}
},
async updateUser(data) {
try {
const res = await axios.post("/api/user", data);
// do something
// this.user = res;
} catch(err) {
//
}
}
},
})
<script setup>
const getUserLoading = ref(false);
const updateUserLoading = ref(false);
// 獲取用戶信息
onMounted(async() => {
getUserLoading.value = true;
await store.getUser();
getUserLoading.value = false;
})
// 修改用戶信息
const updateUser = async () => {
updateUserLoading.value = true;
await store.updateUser({ username: "123" })
updateUserLoading.value = false;
}
</script>
vue-query
// 根文件 app.use(VueQueryPlugin)
// 新建一個文件 useUserQuery.js。需要必傳兩個值，queryKey 是緩存數據需要的唯一值，是個數組，我的習慣是直接用 api 地址。queryFn 是請求的方法。
// useUserQuery.js
const api = "/api/user";
export const useUserQuery = (props) => useQuery({ queryKey: [api], queryFn: () => axios.get(api), ...props });
// 新建一個文件 useUserMutation.js，因為是修改數據，并沒有緩存這個概念，所以不需要唯一值，只需要傳入請求方法即可。
// useUserMutation.js
const api = "/api/user";
export const useUserMutation = (props) => useMutation({ mutationFn: (data) => axios.post(api, data), ...props });
<script setup>
// 獲取用戶信息
const { data, isLoading } = useUserQuery({
onSuccess: (data) => {
// 成功回調
},
onError: (error) => {
// 可以配置全局 onError 錯誤處理，這里不做介紹
},
});
const { isLoading, mutate } = useUserMutation();
// 修改用戶信息
const updateUser = () => {
mutate({ username: "123" })
}
</script>
如果你在另一個地方也需要用到這個 user 數據，你可以再調用一次 useUserQuery，因為之前有緩存了，所以不會發(fā)出請求，但可以拿到數據。或者使用 queryClient 傳入唯一值來獲取數據。
const queryClient = useQueryClient(); const data = queryClient.getQueryData(["/api/user"])
總結
先來看看官方文檔中怎么說 # Does TanStack Query replace Vuex, Pinia or other global state managers?
vue-query 只適用于存儲從服務端獲取的數據，如果有另外的數據需要存儲還是要用到 pinia，但是這種數據是比較少的，這樣也可以使得 pinia 中的代碼量減少很多并簡潔。當然這里介紹的 vue-query 的 api 是最簡單的，你能想到的功能它基本都有，感興趣的可以查看文檔。
趨勢
在 react 中使用 swr、react-query 是大勢所趨，可以從 npm 下載量來看出來。相信今后在 vue 中 vue-query 也會有越來越多的使用，因為另外三大框架都是跟隨 react 走的 hooks 的思想。
以上就是某些場景下建議vue query代替pinia原理解析的詳細內容，更多關于vue query代替pinia原理的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue 實現tab切換保持數據狀態(tài)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue+Vux實現登錄功能，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue實現類似Spring官網圖片滑動效果方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue多頁面開發(fā)和打包的正確處理方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了關于vue3中setup函數的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了如何在Vue中使用CleaveJS格式化你的輸入內容，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue添加錨點,實現滾動頁面時錨點添加相應的class操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家介紹了Vue之生命周期函數，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
MVVM模型主要是為了分離視圖(View)和模型(Model)，其優(yōu)點為：低耦合、可重用性、獨立開發(fā)以及可測試，視圖和模型分離的特點給了 Vue 很大的啟發(fā)，這篇文章主要介紹了MVVM模型在Vue中的使用,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue?mergeProps用法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10