使用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?limit=10`).then((res) => res.json());data.value = response.products;loading.value = false;
}fetchData();const selectedProduct = ref();function onSelect(item) {selectedProduct.value = item;
}
</script><template><div class="container"><ProductModalv-if="selectedProduct":product-id="selectedProduct.id"@close="selectedProduct = null"/><BoringTable :items="data" v-if="!loading" @select="onSelect" /></div>
</template>

在选择产品的情况下，我们将显示一个弹窗并在显示加载状态时获取附加产品信息。

<!-- 未使用vue query的组件 -->
<script setup>
import { ref } from "vue";
import GridLoader from 'vue-spinner/src/GridLoader.vue'const 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();
</script><template><div class="modal"><div class="modal__content" v-if="loading"><GridLoader /></div><div class="modal__content" v-else-if="product">弹窗内容</div></div><div class="modal-overlay" @click="emit('close')"></div>
</template>

添加Vue Query

该库预先配置了合理的默认值。这意味着对于基本用法我们不需要做太多事情。

<!-- 使用vue query的组件 -->
<script setup>
import { useQuery } from "vue-query";function fetchData() {// 获取数据
}const { isLoading, data } = useQuery("uniqueKey",fetchData
);
</script><template>{{ 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?limit=10`).then((res) => res.json());
}const { isLoading, data } = useQuery("products",fetchData
);const selectedProduct = ref();function onSelect(item) {selectedProduct.value = item;
}
</script><template><div class="container"><OptimisedProductModalv-if="selectedProduct":product-id="selectedProduct.id"@close="selectedProduct = null"/><BoringTable :items="data.products" v-if="!isLoading" @select="onSelect" /></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
);</script><template><div class="modal"><div class="modal__content" v-if="isLoading"><GridLoader /></div><div class="modal__content" v-else-if="product">弹窗内容</div></div><div class="modal-overlay" @click="emit('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
);
</script><template>{{ data }}<template v-if="isError">An error has occurred: {{ error }}</template>
</template>