某些場景下建議vue query代替pinia原理解析

更新時間：2023年02月08日 14:54:44 作者：馬格納斯

這篇文章主要為大家介紹了某些場景下建議vue-query代替pinia原理解析,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

在 vue3 中，狀態(tài)管理都是用的 pinia 來處理和存儲從服務(wù)端獲取的數(shù)據(jù)。使用 react 的同學(xué)應(yīng)該對 swr、react-query、ahooks 的 useRequest（前兩者的模仿）并不陌生，這些是專門用來處理數(shù)據(jù)請求的, 能夠幫助你處理得到的數(shù)據(jù)、loading、error，還有緩存數(shù)據(jù)的功能等等。不止有 react-query、vue-query, 還有 svelte-query 和 solid-query，這些其實都是同一個作者，是在同一個庫中，通過它的核心底層來實現(xiàn)各個框架的功能。query 文檔地址

使用區(qū)別

pinia

// 根文件
const pinina = createPinia();
app.use(pinia);

獲取和修改用戶信息，需要維護(hù) user 狀態(tài), 頁面中需要維護(hù)兩個 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 是緩存數(shù)據(jù)需要的唯一值，是個數(shù)組，我的習(xí)慣是直接用 api 地址。queryFn 是請求的方法。
// useUserQuery.js
const api = "/api/user";
export const useUserQuery = (props) => useQuery({ queryKey: [api], queryFn: () => axios.get(api), ...props });
// 新建一個文件 useUserMutation.js，因為是修改數(shù)據(jù)，并沒有緩存這個概念，所以不需要唯一值，只需要傳入請求方法即可。
// 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) => { 
    // 成功回調(diào)
  },
  onError: (error) => {
    // 可以配置全局 onError 錯誤處理，這里不做介紹
  },
});
const { isLoading, mutate } = useUserMutation();
// 修改用戶信息
const updateUser = () => {
  mutate({ username: "123" })
}
</script>

如果你在另一個地方也需要用到這個 user 數(shù)據(jù)，你可以再調(diào)用一次 useUserQuery，因為之前有緩存了，所以不會發(fā)出請求，但可以拿到數(shù)據(jù)?；蛘呤褂?queryClient 傳入唯一值來獲取數(shù)據(jù)。

const queryClient = useQueryClient();
const data = queryClient.getQueryData(["/api/user"])

總結(jié)

先來看看官方文檔中怎么說 # Does TanStack Query replace Vuex, Pinia or other global state managers?

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