Nuxt中使用useLazyFetch无法监听数据与错误变化的问题求助

问题原因 #

你给useLazyFetch添加了await，这会让代码等待请求完成后才执行后续的watch逻辑。此时data和err已经完成状态更新，watch错过了它们的变化时机，所以不会触发回调。另外，useLazyFetch本身是懒加载设计，不需要用await等待请求完成。

修复方案 #

1. 移除不必要的await #

直接解构useLazyFetch返回的响应式对象，让watch在请求过程中就能监听状态变化：

const { data, pending, error: err, refresh } = useLazyFetch('/api/posts');

watch(err, newErr => {
  console.error('error', newErr, err.value);
});

watch(data, newData => {
  console.log('data', data.value, newData);
});

2. 可选：监听初始状态 #

如果需要在data或err的初始值加载完成时也触发watch，可以添加immediate: true配置：

const { data, pending, error: err, refresh } = useLazyFetch('/api/posts');

watch(err, newErr => {
  console.error('error', newErr, err.value);
}, { immediate: true });

watch(data, newData => {
  console.log('data', data.value, newData);
}, { immediate: true });

额外说明 #

• useLazyFetch返回的data和err都是ref响应式对象，在JavaScript逻辑中需要通过.value访问实际值（模板中会自动解包，所以模板能正常显示）
• 若后续调用refresh重新发起请求，watch会正常捕捉到新的状态变化

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