做二手设备的网站,怎么看一个网站用什么平台做的,搜索引擎网站分析,沈阳和平三好街做网站使用Vue Query来获取数据
构建现代大规模应用程序最具挑战性的方面之一是数据获取。加载和错误状态、分页、过滤、排序、缓存等功能会增加复杂性#xff0c;并且经常会因大量样板代码而使应用程序变得臃肿。
vue query使用声明性语法处理和简化数据获取#xff0c;并在幕后…使用Vue Query来获取数据
构建现代大规模应用程序最具挑战性的方面之一是数据获取。加载和错误状态、分页、过滤、排序、缓存等功能会增加复杂性并且经常会因大量样板代码而使应用程序变得臃肿。
vue query使用声明性语法处理和简化数据获取并在幕后为我们处理所有这些重复性任务。
Vue Query介绍
Vue Query不能替代Axios或fetch。它是它们之上的抽象层。
管理服务器状态所面临的挑战与管理客户端状态不同且更加复杂。我们需要解决
缓存在后台更新过时的数据了解数据何时过期尽快反映数据更新将同一数据的多个请求合并为单个请求性能优化例如分页和延迟加载管理服务器状态的内存和垃圾收集通过结构共享来记忆查询结果
Vue Query向我们隐藏了所有这些复杂性。它是根据最佳实践进行默认配置的同时也提供了一种在需要时更改此配置的方法。
基本用法
在页面级别我们需要获取所有产品将它们显示在表格中并使用一些简单的附加逻辑来选择其中一个。
!-- 未使用vue query的组件 --
script setup
import { ref } from vue;
import BoringTable from /components/BoringTable.vue;
import ProductModal from /components/ProductModal.vue;const data ref();
const loading ref(false);async function fetchData() {loading.value true;const response await fetch(https://dummyjson.com/products?limit10).then((res) res.json());data.value response.products;loading.value false;
}fetchData();const selectedProduct ref();function onSelect(item) {selectedProduct.value item;
}
/scripttemplatediv classcontainerProductModalv-ifselectedProduct:product-idselectedProduct.idcloseselectedProduct null/BoringTable :itemsdata v-if!loading selectonSelect //div
/template在选择产品的情况下我们将显示一个弹窗并在显示加载状态时获取附加产品信息。
!-- 未使用vue query的组件 --
script setup
import { ref } from vue;
import GridLoader from vue-spinner/src/GridLoader.vueconst props defineProps({productId: {type: String,required: true,},
});const emit defineEmits([close]);const product ref();
const loading ref(false);async function fetchProduct() {loading.value true;const response await fetch(https://dummyjson.com/products/${props.productId}).then((res) res.json());product.value response;loading.value false;
}fetchProduct();
/scripttemplatediv classmodaldiv classmodal__content v-ifloadingGridLoader //divdiv classmodal__content v-else-ifproduct弹窗内容/div/divdiv classmodal-overlay clickemit(close)/div
/template添加Vue Query
该库预先配置了合理的默认值。这意味着对于基本用法我们不需要做太多事情。
!-- 使用vue query的组件 --
script setup
import { useQuery } from vue-query;function fetchData() {// 获取数据
}const { isLoading, data } useQuery(uniqueKey,fetchData
);
/scripttemplate{{ isLoading }}{{ data }}
/template在上面的例子中
uniqueKey是用于缓存的唯一标识符fetchData是一个通过 API 调用返回承诺的函数isLoading指示 API 调用是否已完成data是对 API 调用的响应
让我们将其合并到我们的示例中
!-- 未使用vue query的组件 --
script setup
import { ref } from vue;
import { useQuery } from vue-query;import BoringTable from /components/BoringTable.vue;
import OptimisedProductModal from /components/OptimisedProductModal.vue;async function fetchData() {return await fetch(https://dummyjson.com/products?limit10).then((res) res.json());
}const { isLoading, data } useQuery(products,fetchData
);const selectedProduct ref();function onSelect(item) {selectedProduct.value item;
}
/scripttemplatediv classcontainerOptimisedProductModalv-ifselectedProduct:product-idselectedProduct.idcloseselectedProduct null/BoringTable :itemsdata.products v-if!isLoading selectonSelect //div
/template由于加载状态由库处理因此提取函数现在得到了简化。
这同样适用于弹窗组件
script setup
import GridLoader from vue-spinner/src/GridLoader.vue
import { useQuery } from vue-query;const props defineProps({productId: {type: String,required: true,},
});const emit defineEmits([close]);async function fetchProduct() {return await fetch(https://dummyjson.com/products/${props.productId}).then((res) res.json());
}const { isLoading, data: product } useQuery([product, props.productId],fetchProduct
);/scripttemplatediv classmodaldiv classmodal__content v-ifisLoadingGridLoader //divdiv classmodal__content v-else-ifproduct弹窗内容/div/divdiv classmodal-overlay clickemit(close)/div
/template上面有两点需要注意
useQuery返回带有名称的响应data为了重命名它我们可以使用像const { data: product } useQuery(...)这样的 es6 解构当在同一页面上执行多个查询时这也很有用。简单的标识符字符串不起作用因为所有产品都将使用相同的函数。我们还需要提供产品 ID[product, props.productId]
我们没有做太多事情但我们得到了很多开箱即用的东西。首先即使没有网络限制重新访问产品时缓存的性能改进也是显而易见的。
默认情况下缓存的数据被认为是过时的。在以下情况下它们会在后台自动重新获取
查询挂载的新实例窗口重新聚焦网络已重新连接。该查询可以选择配置重新获取间隔。
添加错误处理
到目前为止我们的代码都默认 API 调用不会失败。但在实际应用中情况并非总是如此。错误处理应该在 try-catch 块内实现并且需要一些附加变量来处理错误状态。而Vue Query 通过提供isError变量提供了一种更直观处理错误的方式。
script setup
import { useQuery } from vue-query;function fetchData() {// 获取数据
}const { data, isError, error } useQuery(uniqueKey,fetchData
);
/scripttemplate{{ data }}template v-ifisErrorAn error has occurred: {{ error }}/template
/templateVue Query 通过用几行直观的代码逻辑替换复杂的样板代码来简化数据获取。这提高了可维护性并允许无缝连接新的服务器数据源。这样同样能使得应用程序速度更快、 响应更灵敏。
如果我们正在开发中型到大型应用程序可以考虑将Vue Query添加到代码库中。
