import { reactive, ref } from 'vue'
import { useAsyncState } from '@vueuse/core'
export function useRelation() {
const variables = reactive({
workflowOptions: [],
workflow: ref(null),
seriesData: [],
labelShow: ref(true)
})
const getWorkflowName = (projectCode: number) => {
const { state } = useAsyncState(
queryLineageByWorkFlowName({ projectCode }).then(
(res: Array<WorkFlowListRes>) => {
variables.workflowOptions = res.map((item) => {
return {
label: item.workFlowName,
value: item.workFlowCode
}
}) as any
}
),
{}
)
return state
}
return { variables, getWorkflowName }
}
export default useMyAsyncComposable(promise) {
const state = ref(null);
const execute = async () => {
// 2. 等待 promise 执行完成
state.value = await promise
// 5. 一段时间后...
// Promise 执行完,state 更新
// execute 执行完成
}
// 1. 执行 `execute` 方法
execute();
// 3. await 将控制权返回到这一点上。
// 4. 返回 state 并继续执行 "setup" 方法
return state;
}
promise在后台执行,因为我们没有等待它,所以它不会在setup函数中中断流。我们可以将此可组合放置在任何地方,而不影响响应性
useAsyncState 如何使用
最新推荐文章于 2024-06-18 14:44:50 发布