feat(vue-query): 添加 vue-query 示例页面和相关功能

新增 vue-query 示例页面，包含请求演示功能
添加 vue-query 服务层代码和页面跳转逻辑
清理 request.vue 中不再使用的代码注释

src/pages.json

@@ -67,6 +67,14 @@
       "style": {
         "navigationBarTitleText": "Alova 请求演示"
       }
+    },
+    {
+      "path": "pages/about/vue-query",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "Vue Query 请求演示"
+      }
     }
   ],
   "subPackages": [

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>

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
 }

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>

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],
+  })
+}