fix(ApiSelect): 移除watchEffect引发的重复请求
parent
aa63382d1a
commit
857c2d495b
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, ref, unref, watch, watchEffect } from 'vue'
|
import { computed, ref, unref, watch } from 'vue'
|
||||||
import { Select } from 'ant-design-vue'
|
import { Select } from 'ant-design-vue'
|
||||||
import { get, omit } from 'lodash-es'
|
import { get, omit } from 'lodash-es'
|
||||||
import { LoadingOutlined } from '@ant-design/icons-vue'
|
import { LoadingOutlined } from '@ant-design/icons-vue'
|
||||||
|
|
@ -39,7 +39,8 @@ interface OptionsItem { label: string; value: string; disabled?: boolean }
|
||||||
|
|
||||||
const options = ref<OptionsItem[]>([])
|
const options = ref<OptionsItem[]>([])
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const isFirstLoad = ref(true)
|
// 首次是否加载过了
|
||||||
|
const isFirstLoaded = ref(false)
|
||||||
const emitData = ref<any[]>([])
|
const emitData = ref<any[]>([])
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
|
@ -62,10 +63,6 @@ const getOptions = computed(() => {
|
||||||
}, [] as OptionsItem[])
|
}, [] as OptionsItem[])
|
||||||
})
|
})
|
||||||
|
|
||||||
watchEffect(() => {
|
|
||||||
props.immediate && !props.alwaysLoad && fetch()
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => state.value,
|
() => state.value,
|
||||||
(v) => {
|
(v) => {
|
||||||
|
|
@ -80,19 +77,20 @@ watch(
|
||||||
fetch()
|
fetch()
|
||||||
|
|
||||||
else
|
else
|
||||||
!unref(isFirstLoad) && fetch()
|
!unref(isFirstLoaded) && fetch()
|
||||||
},
|
},
|
||||||
{ deep: true },
|
{ deep: true, immediate: props.immediate },
|
||||||
)
|
)
|
||||||
|
|
||||||
async function fetch() {
|
async function fetch() {
|
||||||
const api = props.api
|
const api = props.api
|
||||||
if (!api || !isFunction(api))
|
if (!api || !isFunction(api) || loading.value)
|
||||||
return
|
return
|
||||||
options.value = []
|
options.value = []
|
||||||
try {
|
try {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
const res = await api(props.params)
|
const res = await api(props.params)
|
||||||
|
isFirstLoaded.value = true
|
||||||
if (Array.isArray(res)) {
|
if (Array.isArray(res)) {
|
||||||
options.value = res
|
options.value = res
|
||||||
emitChange()
|
emitChange()
|
||||||
|
|
@ -111,14 +109,14 @@ async function fetch() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleFetch(open) {
|
async function handleFetch(open: boolean) {
|
||||||
if (open) {
|
if (open) {
|
||||||
if (props.alwaysLoad) {
|
if (props.alwaysLoad) {
|
||||||
await fetch()
|
await fetch()
|
||||||
}
|
}
|
||||||
else if (!props.immediate && unref(isFirstLoad)) {
|
else if (!props.immediate && !unref(isFirstLoaded)) {
|
||||||
await fetch()
|
await fetch()
|
||||||
isFirstLoad.value = false
|
isFirstLoaded.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue