如何阻止VueUse的useAsyncState立即执行？

核心问题 #

你直接传入了一个new Promise()实例，Promise在被创建的瞬间就会立即执行，这和useAsyncState的immediate选项无关。useAsyncState的immediate控制的是是否自动触发执行逻辑，而非阻止Promise本身的创建与执行。

修复方案 #

把Promise逻辑包装成一个返回Promise的函数，这样useAsyncState只会在需要的时候（比如调用execute()或immediate: true时）才会执行这个函数并创建Promise：

<script setup>
import { useAsyncState } from '@vueuse/core';

const firstNameSubmit = useAsyncState(
  // 用函数包裹Promise，避免立即执行
  () => new Promise((resolve) => {
    setTimeout(() => {
      console.log('Bob');
      resolve();
    }, 2000);
  }),
  undefined,
  { immediate: false }
);

const handleFirstNameSubmit = () => {
  firstNameSubmit.execute();
};
</script>

效果验证 #

修改后，只有触发handleFirstNameSubmit调用execute()时，定时器逻辑才会执行，控制台才会输出Bob，完全符合你需要的延迟执行需求。

内容的提问来源于stack exchange，提问作者TinyTiger