54 lines
1.0 KiB
Vue
54 lines
1.0 KiB
Vue
<route lang="jsonc" type="page">
|
|
{
|
|
"layout": "default",
|
|
"style": {
|
|
"navigationBarTitleText": "Vue Query 请求演示"
|
|
}
|
|
}
|
|
</route>
|
|
|
|
<script lang="ts" setup>
|
|
import { useQuery } from '@tanstack/vue-query'
|
|
import { foo } from '@/api/foo'
|
|
import { getFooQueryOptions } from '@/api/foo-vue-query'
|
|
|
|
// 简单使用
|
|
onShow(async () => {
|
|
const res = await foo()
|
|
console.log('res: ', res)
|
|
})
|
|
|
|
// vue-query 版
|
|
const {
|
|
data,
|
|
error,
|
|
isLoading: loading,
|
|
refetch: send,
|
|
} = useQuery(getFooQueryOptions('菲鸽-vue-query'))
|
|
</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>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
//
|
|
</style>
|