44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { defineComponent, ref, unref } from 'vue';
|
||
import { Card, Typography, Select } from 'ant-design-vue';
|
||
import { imitateApi } from './mock-api';
|
||
import { useRequest } from '@vben/hooks';
|
||
import { PageWrapper } from '@/components/Page';
|
||
|
||
const options = [
|
||
{ label: 'Jack', value: 'Jack' },
|
||
{ label: 'Lucy', value: 'Lucy' },
|
||
{ label: 'Lutz', value: 'Lutz' },
|
||
];
|
||
|
||
const Demo1 = defineComponent({
|
||
setup() {
|
||
const select = ref('Lutz');
|
||
const { data, loading } = useRequest(() => imitateApi(select.value), { refreshDeps: [select] });
|
||
|
||
return () => (
|
||
<Card title="依赖刷新">
|
||
<Typography>
|
||
<Typography.Paragraph>
|
||
useRequest 提供了一个
|
||
<Typography.Text type="danger"> options.refreshDeps </Typography.Text>
|
||
参数，当它的值变化后，会重新触发请求。
|
||
</Typography.Paragraph>
|
||
</Typography>
|
||
|
||
<Select v-model={[select.value, 'value']} options={options} style="width: 220px" />
|
||
<p>Username: {loading.value ? 'Loading' : unref(data)}</p>
|
||
</Card>
|
||
);
|
||
},
|
||
});
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
return () => (
|
||
<PageWrapper>
|
||
<Demo1 />
|
||
</PageWrapper>
|
||
);
|
||
},
|
||
});
|