useAsyncState 如何使用

最新推荐文章于 2025-09-23 08:28:17 发布

原创最新推荐文章于 2025-09-23 08:28:17 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何使用Vue的`@vueuse/core`库实现工作流选项选择组件，通过`useAsyncState`处理后台查询工作流名称的异步操作，并保持组件的响应性。


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函数中中断流。我们可以将此可组合放置在任何地方，而不影响响应性