网站建设原则应考虑哪些,郑州启凡网络科技公司,wordpress配置多用户,wordpress 调用formvue-query#xff0c;类似于vuex/pinia#xff0c;以缓存为目的#xff0c;但侧重的是对网络请求的缓存。 这是我预想的使用场景#xff1a;假设在各个页面都需要发起相同的请求#xff0c;去获取数据#xff0c;而这种数据在一定时间内不会发生变化#xff0c;那么这种… vue-query类似于vuex/pinia以缓存为目的但侧重的是对网络请求的缓存。 这是我预想的使用场景假设在各个页面都需要发起相同的请求去获取数据而这种数据在一定时间内不会发生变化那么这种请求数据是可以被缓存下来的。
pinia用于处理公共状态vue-query用于处理服务端状态准确的说是把原本需要在pinia中处理的服务端状态迁移到vue-query中。
本实例使用的vue版本是3.3.0
vue-query
github地址DamianOsipiuk/vue-query: Hooks for fetching, caching and updating asynchronous data in Vue (github.com)
1、安装vue-query
npm i vue-query
2、在入口文件中引入
import { VueQueryPlugin } from vue-query
import { createApp } from vueimport router from ./routerimport App from ./App.vue
const app createApp(App)
app.use(router)
app.use(VueQueryPlugin);app.mount(#app)
3、使用
index.vue templatediv
首页
{{ isLoading }}
showList/
button clickgoAbout去about页面/button/div
/templatescript setup langts
import {ref} from vue
import ajax from /common/ajax
import {useQuery} from vue-query;
import {useRouter} from vue-router
import showList from /components/showList.vue;
const router useRouter();
const getData (){
//这里使用的是node写的接口服务自行替换自己的接口return ajax(/live/api/packages/list);
}
const goAbout (){router.push(/about)
}
const {data,isLoading} useQuery([listData], ()getData());/scriptstyle scoped/style
components/showList.vue
templatedivh2列表组件/h2ulli v-forpackages in packageList :keypackages._id{{ packages.name }}/li/ul/div
/templatescript setup langts
import { computed } from vue
import { useQuery } from vue-query;const {data} useQuery([listData]);const packageList computed(() data.value?.data.data.list);/scriptstyle scoped/style
效果展示 可以看到组使用 listData的缓存数据
接下来在首页跳转到about页面在about页面也使用这份缓存数据
about.vue
templatedivh2About页面使用缓存数据/h2ulli v-forpackages in packageList :keypackages._id{{ packages.name }}/li/ul/div
/templatescript setup langts
import { computed } from vueimport { useQuery } from vue-query;
const { data } useQuery([listData]);const packageList computed(() data.value?.data.data.list);/scriptstyle scoped/style
效果展示 跳转到about页面是没有重新发送请求的使用的是之前的缓存数据
但是发现在页面重新获取焦点和切换路由后会重新发送请求看文档说以下添加配置但是发现不起效
const {data,isLoading} useQuery([listData], ()getData(),{cacheTime: Infinity,staleTime: Infinity,
}); vue-query tanstack/vue-query
tanstack/vue-query可以说是vue-query的强化版本TanStack Query 是一个开源、功能齐全、支持 TypeScript 的库,非常适合用于处理客户端状态处理异步或服务器状态。它支持ReactVue,SvelteSolid框架大多时候我们都会我们使用的框架把它叫做vue-query或者react-query。
特点
非常好用的query库目的是为了缓存后端api的结果不用像以前一样手动将结果一个一个存储到store并且提供了一些非常好用的hook方法非常适合用于处理客户端状态处理异步或服务器状态默认支持异步它并不是用于替代axios等请求库而只是作为外层的封装方便控制请求与结果
安装
npm i tanstack/vue-query 在入口文件注册
import { VueQueryPlugin } from tanstack/vue-query
app.use(VueQueryPlugin);
复用上面的代码只需要将vue-query改为tanstack/vue-query
index.vue
templatediv首页{{ isLoading }}!-- {{ data }} --!-- {{ datas }} --showList /button clickgoAbout去about页面/button/div
/templatescript setup langtsimport ajax from /common/ajax
import { useQuery } from tanstack/vue-query;import { useRouter } from vue-router
import showList from /components/showList.vue;
const router useRouter();const getData () {return ajax(/live/api/packages/list);
}const goAbout () {router.push(/about)
}const { data, isLoading } useQuery({queryKey: [listData],queryFn: () getData(),});/scriptstyle scoped/style
components/showList.vue
templatedivh2列表组件/h2ulli v-forpackages in packageList :keypackages._id{{ packages.name }}/li/ul/div
/templatescript setup langts
import { computed } from vue
import {useQuery} from tanstack/vue-query;const { data } useQuery({queryKey: [listData]
});const packageList computed(() data.value?.data.data.list);/scriptstyle scoped/style
about.vue
templatedivh2About页面使用缓存数据/h2ulli v-forpackages in packageList :keypackages._id{{ packages.name }}/li/ul/div
/templatescript setup langts
import { computed } from vueimport { useQuery } from tanstack/vue-query;
const { data } useQuery({queryKey:[listData]
});const packageList computed(() data.value?.data.data.list);/scriptstyle scoped/style
设置refetchInterval在规定间隔中重新发送请求
const { data, isLoading } useQuery({queryKey: [listData],queryFn: () getData(),refetchInterval: 12000
});
可以看到network会重新发送请求 tanstack/vue-query 总结
vue-query 只适用于存储从服务端获取的数据如果有另外的数据需要存储还是要用到 pinia但是这种数据是比较少的这样也可以使得 pinia 中的代码量减少很多并简洁。当然这里介绍的 vue-query 的 api 是最简单的你能想到的功能它基本都有感兴趣的可以查看文档。
