-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Whether using useAxios within a function fails to track responsive data #3981
Comments
That code is working for me const loading = ref(false)
function getData() {
const { data, isLoading, isFinished, execute, abort, isAborted } = useAxios(
'https://jsonplaceholder.typicode.com/todos/1',
)
watchEffect(() => {
loading.value = isLoading.value
})
return { execute, data }
}
const a = getData()
setTimeout(() => {
a.execute()
}, 1500)
In terms of "loading". I'd probably do const {isLoading} = useAxios()
const _loading = ref(false)
const loading = computed(() => isLoading.value || _loading.value) But that's even assuming _loading needs to exist. Hypothetically if you needed to use it somewhere else, but tracking the loading elements individually is probably best const loading = ref(false)
const {isLoading, data, execute} = useAxios() // This doesn't need to be defined in a function
// You're going to be rebuilding useAxios on each function call. So you'd have new returned refs from useAxios.
// This isn't "bad", it's actually just a new composable at this point |
If |
I dont understand the question |
This is how I currently write it, the responsive data is placed in <script setup lang="ts">
const loading = ref(false)
const list = ref([])
function getData() {
const { data, isLoading } = useAxios(
'https://jsonplaceholder.typicode.com/todos/1',
)
watchEffect(() => {
loading.value = isLoading.value
list.value = data.value
})
}
getData()
</script>
<template>
<el-table
v-loading="loading"
:data="list"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template> |
You can just rewrite to this. You dont need the wrapping composable function const { data: list, isLoading: loading, execute } = useAxios('https://jsonplaceholder.typicode.com/todos/1') |
This way the component loading will request the interface, how can I implement this if I need event triggering? I'm sorry, maybe my question is low-level |
I dont understand the question, but the execute function re-fetches the data |
Written in this way, when entering this component or page, <script setup lang="ts">
const { data: list, isLoading: loading, execute } = useAxios('https://jsonplaceholder.typicode.com/todos/1')
</script> |
|
Thanks, my fault for not checking the docs carefully! |
Describe the bug
loading
cannot be changed to false after the request is completed.I'm sure it's not a vueuse problem, but rather that vue is designed that way, but I don't know how to fix it
This is currently possible, but I'd like to know if there are any other more elegant ways to write it.
Reproduction
https://github.com/vueuse/vueuse/blob/main/packages/integrations/useAxios/demo.vue
System Info
Used Package Manager
pnpm
Validations
The text was updated successfully, but these errors were encountered: