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>
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
});
|