From feb3d8104b9aeb65b04d214724a91018d98461f6 Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Wed, 16 Jul 2025 21:25:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(vue-query):=20=E6=B7=BB=E5=8A=A0=20vue-que?=
 =?UTF-8?q?ry=20=E7=A4=BA=E4=BE=8B=E9=A1=B5=E9=9D=A2=E5=92=8C=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 vue-query 示例页面，包含请求演示功能
添加 vue-query 服务层代码和页面跳转逻辑
清理 request.vue 中不再使用的代码注释
---
 src/pages.json                         |  8 ++++
 src/pages/about/about.vue              | 12 +++++-
 src/pages/about/components/request.vue | 11 ------
 src/pages/about/vue-query.vue          | 54 ++++++++++++++++++++++++++
 src/service/index/vue-query.ts         | 11 ++++++
 5 files changed, 84 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/about/vue-query.vue
 create mode 100644 src/service/index/vue-query.ts

diff --git a/src/pages.json b/src/pages.json
index c3df3c9..1a7f817 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -67,6 +67,14 @@
       "style": {
         "navigationBarTitleText": "Alova 请求演示"
       }
+    },
+    {
+      "path": "pages/about/vue-query",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "Vue Query 请求演示"
+      }
     }
   ],
   "subPackages": [
diff --git a/src/pages/about/about.vue b/src/pages/about/about.vue
index 8eef8b4..77bd596 100644
--- a/src/pages/about/about.vue
+++ b/src/pages/about/about.vue
@@ -22,6 +22,11 @@ function gotoAlova() {
     url: '/pages/about/alova',
   })
 }
+function gotoVueQuery() {
+  uni.navigateTo({
+    url: '/pages/about/vue-query',
+  })
+}
 </script>
 
 <template>
@@ -35,7 +40,12 @@ function gotoAlova() {
     <RequestComp />
     <view class="text-center">
       <button type="primary" size="mini" class="w-160px" @click="gotoAlova">
-        前往 alova 页面
+        前往 alova 示例页面
+      </button>
+    </view>
+    <view class="text-center">
+      <button type="primary" size="mini" class="w-160px" @click="gotoVueQuery">
+        vue-query 示例页面
       </button>
     </view>
   </view>
diff --git a/src/pages/about/components/request.vue b/src/pages/about/components/request.vue
index 07562ad..fc20d52 100644
--- a/src/pages/about/components/request.vue
+++ b/src/pages/about/components/request.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { IFooItem } from '@/service/index/foo'
 import { getFooAPI } from '@/service/index/foo'
-// import { findPetsByStatusQueryOptions } from '@/service/app'
-// import { useQuery } from '@tanstack/vue-query'
 
 const recommendUrl = ref('http://laf.run/signup?code=ohaOgIX')
 
@@ -11,20 +9,11 @@ const recommendUrl = ref('http://laf.run/signup?code=ohaOgIX')
 //   id: '1234',
 // }
 const initialData = undefined
-// 适合少部分全局性的接口————多个页面都需要的请求接口，额外编写一个 Service 层
 const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), {
   immediate: true,
   initialData,
 })
 
-// 使用 vue-query 的 useQuery 来请求数据，只做参考，是否使用请根据实际情况而定
-// const {
-//   data: data2,
-//   error: error2,
-//   isLoading: isLoading2,
-//   refetch,
-// } = useQuery(findPetsByStatusQueryOptions({ params: { status: ['available'] } }))
-
 function reset() {
   data.value = initialData
 }
diff --git a/src/pages/about/vue-query.vue b/src/pages/about/vue-query.vue
new file mode 100644
index 0000000..b58436e
--- /dev/null
+++ b/src/pages/about/vue-query.vue
@@ -0,0 +1,54 @@
+<route lang="jsonc" type="page">
+{
+  "layout": "default",
+  "style": {
+    "navigationBarTitleText": "Vue Query 请求演示"
+  }
+}
+</route>
+
+<script lang="ts" setup>
+import { useQuery } from '@tanstack/vue-query'
+import { getFooQueryOptions } from '@/service/index/vue-query'
+
+const initialData = undefined
+
+const {
+  data,
+  error,
+  isLoading: loading,
+  refetch: send,
+} = useQuery(getFooQueryOptions('菲鸽-vue-query'))
+
+function reset() {
+  data.value = initialData
+}
+</script>
+
+<template>
+  <view class="p-6 text-center">
+    <button type="primary" size="mini" class="my-6 w-160px" @click="send">
+      发送请求
+    </button>
+    <view class="h-16">
+      <view v-if="loading">
+        loading...
+      </view>
+      <block v-else>
+        <view class="text-xl">
+          请求数据如下
+        </view>
+        <view class="text-green leading-8">
+          {{ JSON.stringify(data) }}
+        </view>
+      </block>
+    </view>
+    <button type="default" size="mini" class="my-6 w-160px" @click="reset">
+      重置数据
+    </button>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>
diff --git a/src/service/index/vue-query.ts b/src/service/index/vue-query.ts
new file mode 100644
index 0000000..c7cbdd4
--- /dev/null
+++ b/src/service/index/vue-query.ts
@@ -0,0 +1,11 @@
+import { queryOptions } from '@tanstack/vue-query'
+import { getFooAPI } from './foo'
+
+export function getFooQueryOptions(name: string) {
+  return queryOptions({
+    queryFn: async ({ queryKey }) => {
+      return getFooAPI(queryKey[1])
+    },
+    queryKey: ['getFoo', name],
+  })
+}