某些场景下建议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) {
       //
      }
    }
  },
})

<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，因为之前有缓存了，所以不会发出请求，但可以拿到数据。或者使用 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原理的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue项目实例中用query传参如何实现跳转效果

    目录 用query传参实现跳转效果 传值页面 接收参数页面 vue使用query传参,解决跳转回退无参数渲染页面,无内容的方法(不需使用缓存的技术) 简说params和query的区别 用query传参实现跳转效果 vue中已element-ui为例,写带参跳转很方便 <el-table :data="tables" style="width: 100%; cursor: pointer" :class="tableData.length >

  • vue3中路由传参query、params及动态路由传参详解

    目录 一.query传参 二.params传参 三.动态传参 四.query传参和params传参的区别 总结 一.query传参 编程式导航 使用router.push 或者 router.replace 的时候,改为对象形式新增query 必须传入一个对象 import { useRouter } from 'vue-router'; ... const router = useRouter() const toDetail = (item: Item) => { router.push({

  • Vue Router修改query参数url参数没有变化问题及解决

    目录 Router修改query参数url参数没有变化问题 正常情况下 就可以修改了 vueRouter不切换url只修改query报错 解决方案 Router修改query参数url参数没有变化问题 正常情况下 this.$router.push({ query:{} }) this.$router.replace({ query:{} }) 就可以修改了 但是当已有query对象里面修改其中一个值,就会发现虽然this.$route.query发生改变但是浏览器的url上的参数并没有发生变化

  • vue在body和query中如何向后端传参

    目录 在body和query中向后端传参 data params vue往后台传参(不是传对象) example 在body和query中向后端传参 在vue向Django后端传参的时候,常常会出现request.body或者其他为空的现象,主要原因是参数存放的位置不对.这里总结一下两种传参方式. data 我们需要传递的数据可以放在data中以键值对的形式来传递到后端. export function registerM(username, password) {     return req

  • vue引入jquery时报错 $ is not defined的问题及解决

    vue引入jquery时报错 $ is not defined的问题及解决

    目录 vue引入jquery时报错 $ is not defined 安装JQuery 统一webpack版本 新建配置文件 vue错误笔记 Vue is not defined 事情的经过 找到两种解决方案 vue引入jquery时报错 $ is not defined 以免日后再次遇到忘记. 安装JQuery npm install --save jquery 统一webpack版本 不同版本处理方法可能不同,我们这里就统一一下webpack版本 npm uninstall webpack

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

    目录 前言 使用区别 pinia vue-query 总结 趋势 前言 在 vue3 中,状态管理都是用的 pinia 来处理和存储从服务端获取的数据.使用 react 的同学应该对 swr.react-query.ahooks 的 useRequest(前两者的模仿)并不陌生,这些是专门用来处理数据请求的, 能够帮助你处理得到的数据.loading.error,还有缓存数据的功能等等.不止有 react-query.vue-query, 还有 svelte-query 和 solid-quer

  • vue.js响应式原理解析与实现

    从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.今天,就我们就来一步步解析vue.js响应式的原理,并且来实现一个简单的demo. 首先,先让我们来了解一些基础知识. 基础知识 Object.defineProperty es5新增了Object.defineProperty这个api,它可以允许我们为对象的属性来设定gette

  • vue数据双向绑定原理解析（get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通过事件回调函数操作的,model到view的绑定有多种方法. angular,react,vue等mv*模式的框架都实现了数据双向绑定:angular是通过脏检查即新老数据的比较来确定哪些数据发生了变化,从而将它更新到view中:vue则是通过设置数据的get和set函数来实现的,这种方式在性能上是

  • Apache环境下PHP利用HTTP缓存协议原理解析及应用分析

    对于静态页面还有Etag. 一.先来看第一种情况:apache 静态页面 apache发送给客户端的静态页面一般包含Last-Modified和Etag,这两个标签的值来自静态文件的修改时间和inode. 下面是截取得apache返回客户端的头 XML/HTML代码 复制代码 代码如下: Last-Modified: Fri, 26 Jan 2007 01:53:34 GMT ETag: "3f9f640-318-cb9f8380" 搜索引擎之所以喜欢静态文件是因为有这两个标识,可以判

  • 深入浅析Vue不同场景下组件间的数据交流

    深入浅析Vue不同场景下组件间的数据交流

    正文 浅谈Vue不同场景下组件间的数据"交流" Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是"方法论",而不是"场景论",这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景.这就是我写这篇文章的目的,探讨不同场景下组件间的数据"交流"的Vue实现 父子组件间的数据交流 父子组件间的数据交流可分为两种: 1.父组件传

  • Vue实现购物车场景下的应用

    本文实例为大家分享了Vue在购物车场景下的应用,供大家参考,具体内容如下 购物车场景需求: 1. 商品.店铺.购物车的选择 2. 商品删除 关键代码 测试数据 var _list = [{ checked: false, goods: [{ name: "商品1", price: 23, checked: false }] }, { checked: false, goods: [{ name: "商品2", price: 20, checked: false },

  • vscode下的vue文件格式化问题

    我相信基本上每一个在vscode上面码Vue代码的都会下载Vetur插件用来格式化等操作,今天Vetur更新了 0.14.2 版本,最近在使用的时候,感觉格式化总是出问题,去Vetur上面看了下,发现Vetur的配置做了下面的改动,看到几个社区都没有人说明,我就先说下,默认的格式化配置是: { "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter

  • 分区表场景下的 SQL 优化

    导读 有个表做了分区,每天一个分区. 该表上有个查询,经常只查询表中某一天数据,但每次都几乎要扫描整个分区的所有数据,有什么办法进行优化吗? 待优化场景 有一个大表,每天产生的数据量约100万,所以就采用表分区方案,每天一个分区. 下面是该表的DDL: CREATE TABLE `t1` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `date` date NOT NULL, `kid` int(11) DEFAULT '0', `uid` int(11)

  • js节流防抖应用场景,以及在vue中节流防抖的具体实现操作

    故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(debounce),在网上想找个现成的用下,但是好多都不对,于是就自己搞了. 先看看概念 函数防抖(debounce): 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 函数节流(throttle)

  • spring boot微服务场景下apollo加载过程解析

    目录 集成使用 1.添加gradle依赖 2.配置application.properties 必须配置 可选配置 加载过程解析 postProcessEnvironment方法逻辑解析 initialize方法逻辑解析 结语 集成使用 1.添加 gradle 依赖 implementation "com.ctrip.framework.apollo:apollo-client:1.6.0" 2.配置 application.properties apollo 自身的配置共包含 9 项

随机推荐