如何在 tanstack 的 vue-query 中使用计算属性？

Question

我习惯使用 Pinia/Vuex 来分发 axios 请求并将数据存储在 store 中，然后使用 getter 对数据进行计算操作。我正在使用 Vue 3.

一个简单的例子：假设我有一个表，我从动作中获取数据并将其放入状态，然后为不同的排序过滤器使用不同的getter

现在，vue-query 文档说使用 vue-query 时可能不需要 Vuex/Pinia/状态管理。 这就是我的问题所在，如何组织代码，以便我仍然可以使用计算的属性/getter，而无需将它们放在我使用 vue-query 的本地文件中？

我知道我可能完全忽略了 vue-query 的要点。在那种情况下，请列出一些我可以了解更多信息的资源（不仅仅是文档）..

我尝试从商店中获取数据（使用商店中的操作作为查询功能），然后依赖模板中的 vue-query 属性

isLoading

，

isError

。 之后，我使用了商店的吸气剂。

这感觉不对，vue-query和Pinia中的重复数据？？

这是最小的例子：

<script setup lang="ts">
const { isLoading, isError, error } = useQuery({
  queryKey: ["items"],
  queryFn: store.fetchItems,
});

const {
  listItems: items,
} = storeToRefs(store);
</script>

<template>
    <template v-if="isLoading"> loading </template>
    <template v-else-if="isError">
      {{ error }}
    </template>
    <template v-else>
      <div>{{ items }}</div>
    </template>
</template>

店铺有：

  const list: Ref<Item[]> = ref([]);
  const listItems = computed(() => list.value);

  async function fetchItems(): Promise<Item[]> {
    try {
      const response = await axios.get<Item[]>(`${dbUrl}/items`);

      list.value = response.data || [];
      return list.value;
    } catch (err) {
      list.value = [];
      throw new Error(err as string);
    }
  }

  return {
    fetchItems,
    listItems,
  }