某些场景下建议vue query代替pinia原理解析

目录

• 前言
• 使用区别
• pinia
• vue-query
• 总结
• 趋势

前言

在 vue3 中，状态管理都是用的 pinia 来处理和存储从服务端获取的数据。使用 react 的同学应该对 swr、react-query、ahooks 的 useRequest（前两者的模仿）并不陌生，这些是专门用来处理数据请求的, 能够帮助你处理得到的数据、loading、error，还有缓存数据的功能等等。不止有 react-query、vue-query, 还有 svelte-query 和 solid-query，这些其实都是同一个作者，是在同一个库中，通过它的核心底层来实现各个框架的功能。query 文档地址

使用区别

pinia

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

获取和修改用户信息，需要维护 user 状态, 页面中需要维护两个 loading 状态。

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) {
       //
      }
    }
  },
})

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 });

如果你在另一个地方也需要用到这个 user 数据，你可以再调用一次 useUserQuery，因为之前有缓存了，所以不会发出请求，但可以拿到数据。或者使用 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原理的资料请关注脚本之家其它相关文章！